<template>
	<view class="pk-modal" v-if="show">
		<u-modal v-model="show" width="100%" :showTitle="false" :mask-close-able="true" :show-confirm-button="false">
			<view class="base-tip-box flex-row-center-center" v-if="showTip">{{tipText}}</view>
			<view class="content-box">
				<mBack ref="mBack" :name="backName" @getGameResult="handleCloseModal" v-if="
           ( type != 'user' &&
            type != 'dice' &&
            !showTravelModal &&
            type != 'event' &&
            type != 'reward') &&!isHideBack			
          ">
				</mBack>

				<!-- 用户 -->
				<view class="user-box" v-if="type == 'user'" @click="handleCloseModal">
					<u-picker mode="selector" v-model="showConstellation" @confirm="handleChooseConstellation"
						:default-selector="[constellationIndex]" :range="constellationArr"></u-picker>
					<view class="center-content" @click.stop>
						<view class="content-box">
							<view class="top-title">
								<view class="bottom-line">
									<view class="line-content"></view>
								</view>
								<view class="m-close-icon" @click="handleCloseModal">
									<image class="m-close-icon-img"
										src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/a4650d9479964fee9685179a9335462d.png"
										mode="aspectFill"></image>
								</view>
							</view>

							<!-- 顶部用户信息 -->
							<view class="user-game-info">
								<view class="user-avatar" @click="handeUserChangeAvatar">
									<image class="user-avatar-img" :src="userInfo.avatar" mode="aspectFill"></image>
									<image class="user-avatar-boder" :src="userInfo.avatarBorder" mode="aspectFill">
									</image>
								</view>
								<view class="user-other-info">
									<view class="user-nickName">
										宝宝巴士
										<image class="change-name"
											src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/98a957aab52e4047b5bd49a31c42598a.png"
											mode="aspectFill"></image>
									</view>
									<view class="user-level-exp">
										<view class="user-level">新星总裁10阶</view>
										<view class="user-exp">
											<view class="user-exp-icon">UID</view>
											<view class="exp-num">
												<text class="exp-num-now">109673</text>
												<!-- <text class="exp-num-need">/145468</text> -->
											</view>
										</view>
									</view>
									<view class="line-box">
										<view class="point-box"></view>
									</view>
								</view>
							</view>

							<view class="user-info-box" v-if="activeUserTabType == 'info' && !isChangeAvatar">
								<view class="title-box title-bg">
									<view class="title-content">
										<view class="left-tip">
											<view class="tip-icon"></view>
											<view class="tip-text">公司</view>
										</view>
										<view class="right-content">Lv.13 杭州境由心动</view>
									</view>
								</view>

								<view class="title-box">
									<view class="title-content">
										<view class="left-tip">
											<view class="tip-icon"></view>
											<view class="tip-text">荣誉</view>
										</view>
										<view class="right-content"></view>
									</view>
								</view>

								<view class="honor-box">
									<scroll-view ref="scrollView" scroll-y class="scroll-content"
										:show-scrollbar="false" :scroll-with-animation="true">
										<view class="honer-list">
											<view class="honer-item" v-for="(item, index) in honerList" :key="index">
												<view class="honer-icon">
													<image class="honer-icon-img" :src="item.image" mode="aspectFill">
													</image>
												</view>

												<view class="honer-locked-masker" v-if="item.locked">
													<image class="locked-icon" v-if="item.locked"
														src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/acb0459908234cf3b311f42f917623e5.png"
														mode="aspectFill"></image>
												</view>
											</view>
										</view>
									</scroll-view>
								</view>
							</view>

							<view class="setting-box" v-if="activeUserTabType == 'setting' && !isChangeAvatar">
								<view class="title-box">
									<view class="title-content">
										<view class="left-tip">
											<view class="tip-icon"></view>
											<view class="tip-text">开关</view>
										</view>
										<view class="right-content"></view>
									</view>
								</view>
							</view>

							<view class="data-box" v-if="activeUserTabType == 'data' && !isChangeAvatar">
								<view class="title-box">
									<view class="title-content">
										<view class="left-tip">
											<view class="tip-icon"></view>
											<view class="tip-text">个人资料</view>
											<image class="change-icon" @click="handleStartEditUserData"
												src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/98a957aab52e4047b5bd49a31c42598a.png"
												mode="aspectFill"></image>
										</view>
										<view class="right-content"> </view>
									</view>
								</view>

								<view class="user-self-data">
									<view class="data-item">
										<view class="data-label">年龄</view>
										<view class="data-content" :class="{ 'not-edit': !isUserDataEdit }">
											<input v-if="isUserDataEdit" class="data-content-input"
												v-model="userInfo.age" />
											<text v-if="!isUserDataEdit">{{ userInfo.age }}</text>
										</view>
									</view>

									<view class="data-item right-item">
										<view class="data-label">星座</view>
										<view class="data-content" :class="{ 'not-edit': !isUserDataEdit }">
											<text v-if="!isUserDataEdit">{{
                        userInfo.constellation
                      }}</text>
											<view class="data-content-input" v-if="isUserDataEdit"
												@click="handleUserSelectConstellation">
												{{ userInfo.constellation }}
											</view>
										</view>
									</view>
								</view>

								<view class="title-box">
									<view class="title-content">
										<view class="left-tip">
											<view class="tip-icon"></view>
											<view class="tip-text">个性签名</view>
										</view>
										<view class="right-content"> </view>
									</view>
								</view>

								<view class="signature-box">
									<textarea class="signature-box-area" placeholder="我就是我,颜色不一样的烟火~"
										v-model="userInfo.signature" :rows="4"></textarea>
								</view>
							</view>

							<view class="bottom-tab-box" v-if="!isChangeAvatar">
								<view class="bottom-tab">
									<view class="tab-line-box"></view>
									<scroll-view ref="scrollView" :scroll-x="true" style="white-space: nowrap"
										class="tab-scroll-content" :show-scrollbar="false"
										:scroll-with-animation="true">
										<view class="tab-list">
											<view class="tab-item" @click="handleUserTabItemClick(item, index)" :class="{
                          'tab-item-active': activeUserTabType == item.type,
                        }" v-for="(item, index) in userTabList" :key="index">
												<view class="top-tabName">{{ item.name }}</view>
												<view class="line-box"></view>
											</view>
										</view>
									</scroll-view>
								</view>
							</view>

							<view class="avatar-border-change" v-if="isChangeAvatar">
								<view class="avatar-tab">
									<view class="n-tab-list">
										<scroll-view ref="scrollView" :scroll-x="true" style="white-space: nowrap"
											class="tab-scroll-content" :show-scrollbar="false"
											:scroll-with-animation="true">
											<view class="tab-list">
												<view class="tab-item" @click="handleAvatarChangeTypeClick(item, index)"
													:class="{
                            'bag-active-tabItem':
                              actUserAvatarType == item.type,
                          }" v-for="(item, index) in userAvatarChangeTab" :key="index">
													<view class="tab-content">
														<view class="top-tabName">{{ item.name }}</view>
														<view class="line-box"></view>
													</view>
												</view>
												<view class="bottom-line-box"></view>
											</view>
										</scroll-view>
									</view>
								</view>
								<view class="avatar-border-list">
									<scroll-view ref="scrollView" :scroll-y="true" style="white-space: nowrap"
										class="scroll-content" :show-scrollbar="false" :scroll-with-animation="true">
										<view class="avatar-list" v-if="actUserAvatarType == 'avatar'">
											<view class="avatar-item" :class="{
                          'avatar-item-act': activeAvatarIndex == index,
                        }" v-for="(item, index) in avatarList" :key="index"
												@click="handleUserAvatarClick(item, index)">
												<image class="avatar-item-img" :src="item.image" mode="aspectFill">
												</image>
												<view class="avatar-shadow-box"></view>
											</view>
										</view>
										<view class="avatar-list" v-if="actUserAvatarType == 'border'">
											<view class="avatar-item avatar-item-boder" :class="{
                          'avatar-item-act': activeAvatarBoderIndex == index,
                        }" v-for="(item, index) in avatarBoderList" :key="index"
												@click="handleUserAvatarBoderClick(item, index)">
												<image class="avatar-item-img" :src="item.image" mode="aspectFill">
												</image>
												<view class="avatar-shadow-box"></view>
											</view>
										</view>
									</scroll-view>
								</view>
								<view class="avatar-btn-box">
									<view class="btn-item cancel-btn" @click="handleChangeUserAvatarCancel">取 消</view>
									<view class="btn-item" @click="handleChangeUserAvatarConfirm">确 认</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 舞姬 -->
				<view class="team-box" v-if="type == 'team'">
					<view class="top-box"></view>
					<view class="team-line-box">
						<view class="line-content"> 卡牌数量：9 </view>
					</view>
					<scroll-view ref="scrollView" scroll-y class="team-member-scroll" :show-scrollbar="false"
						:scroll-with-animation="true">
						<view class="menber-list">
							<!--  'green-card':item.RarityLevel==1,'orange-card':item.RarityLevel==2,'blue-card':item.RarityLevel==3,'purple-card':item.RarityLevel==4 -->
							<view class="member-item card-after-before card-farther" :class="{
                  'empty-item': item.isEmpty,
                  'active-menber': index == activeMemberIndex,
				  'blue-card':item.RarityLevel==1,'orange-card':item.RarityLevel==2,'purple-card':item.RarityLevel==3,'colorful-card':item.RarityLevel==4
                }" v-for="(item, index) in girlsList" :key="index" @click="handleMemberItemClick(index, item)">
								<view class="menber-item-content  flex-row-center-center" v-if="!item.isEmpty">
									<image class="cover-img team-item-img" :src="item.image" mode="aspectFill"></image>
									<view class="start-box flex-row-center-center"
										:style="{ opacity: activeMemberType == 'girl' ? 1 : 0 }">
										<view class="start-item" v-for="(sitem, sindex) in getStartList(item.start, 5)"
											:key="sindex">
											<image class="start-img" v-if="sitem.active"
												src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/2ebd9f516e784cc8a2548418ad582a5c.png"
												mode="aspectFill"></image>

											<image class="start-img" v-else
												src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/7dcdf112c1e14b4e88da52afcc3b96bb.png"
												mode="aspectFill"></image>
										</view>
									</view>

									<view class="rarity-level flex-row-start-center" v-if="item.RarityLevel">
										<image class="cover-img" :src="handleReturnRarityLevelUrl(item.RarityLevel)"
											mode="aspectFill">
										</image>
									</view>

									<view class="level-number flex-row-end-center" v-if="item.level">
										<view class="level-icon">
											Lv.
										</view>
										<text class="level-text">{{item.level}}</text>
									</view>



									<view class="bottom-info-new flex-row-center-center">
										<view class="name-box flex-row-center-center">{{ item.name }}</view>
									</view>
									<view class="locked-masker flex-row-center-center" v-if="item.locked">

										<view class="locked-tip">未获得</view>

									</view>
								</view>
							</view>
						</view>
					</scroll-view>

				</view>

				<!-- 商城 -->
				<view class="shop-box" v-if="type == 'shop'">
					<view class="top-box"></view>
					<view class="shop-tab-box">
						<view class="n-tab-list">
							<scroll-view ref="scrollView" :scroll-x="true" style="white-space: nowrap"
								class="tab-scroll-content" :show-scrollbar="false" :scroll-with-animation="true">
								<view class="tab-list">
									<view class="tab-item" @click="handleShopTabItemClick(item, index)" :class="{
                      'bag-active-tabItem': activeShopTabIndex == index,
                    }" v-for="(item, index) in shopTabList" :key="index">
										<view class="tab-content">
											<view class="top-tabName">{{ item.name }}</view>
											<view class="line-box"></view>

											<image class="locked-icon" v-if="item.locked"
												src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/acb0459908234cf3b311f42f917623e5.png"
												mode="aspectFill"></image>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
					</view>
					<view class="shop-banner" v-if="activeShopTabType == 'selectedRecommendations'">
						<view class="banner-img-box">
							<image class="banner-img"
								src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/b9542fa6a54444589ff06bf11400ee54.png"
								mode=""></image>
						</view>
					</view>

					<view class="goods-scroll" v-if="activeShopTabType == 'selectedRecommendations'">
						<scroll-view ref="scrollView" scroll-y class="goods-scroll-content" :show-scrollbar="false"
							:scroll-with-animation="true">
							<view class="goods-list">
								<view class="goods-item" :class="{
                    'empty-item': item.isEmpty,
                    'active-menber': index == activeMemberIndex,
                  }" v-for="(item, index) in goodsList" :key="index">
									<view class="item-content" v-if="!item.isEmpty">
										<!-- <image class="item-img" :src="item.image" mode=""></image> -->
										<view class="goods-img">
											<image class="goods-img-icon" :src="item.image" mode=""></image>
										</view>
										<view class="goods-name-box">
											<view class="left-line"></view>
											<view class="center-name">{{ item.name }}</view>
											<view class="right-line"></view>
										</view>
										<view class="bottom-buy-btn">
											<view class="buy-btn-content">{{
                        item.price | goodsPriceFilter
                      }}</view>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>

					<view class="shop-card-box" v-if="activeShopTabType == 'monthlyCard'">
						<view class="top-card-banner">
							<image class="top-card-banner-img"
								src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/53e1d59d19134af691b366981ec11a00.png"
								mode="aspectFill"></image>
						</view>
						<view class="card-good">
							<image class="card-good-img"
								src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/85dfdca26dfe4a5595321c5cd1cc6d57.png"
								mode="aspectFill"></image>
						</view>
						<view class="card-good card-super">
							<image class="card-good-img"
								src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/da6a17db5d89401f99f2db12da45ed69.png"
								mode="aspectFill"></image>
						</view>
					</view>
				</view>
				<!-- 背包 -->
				<view class="bag-box" v-if="type == 'equip'">
					<view class="top-box"></view>
					<view class="bag-bottom-tab">
						<scroll-view ref="scrollView" :scroll-x="true" style="white-space: nowrap"
							class="tab-scroll-content" :show-scrollbar="false" :scroll-with-animation="true">
							<view class="bag-tab-item" @click="handleBagTabClick(index, item)"
								:class="{ 'bag-active-tabItem': activeBagTabIndex == index }"
								v-for="(item, index) in bagTabs" :key="index">
								<view class="top-tabName">{{ item.name }}</view>
							</view>
						</scroll-view>
						<view class="tab-bottom-line">
							<view class="line-center"></view>
						</view>
					</view>
					<view class="center-bag-scroll">
						<scroll-view ref="scrollView" scroll-y class="bag-scroll-content" :show-scrollbar="false"
							:scroll-with-animation="true">
							<view class="bag-thing-list">
								<view class="thing-content">
									<view class="thing-item" :class="{
                      'empty-thing': item.isEmpty,
                      'green-good': item.RarityLevel == 1,
                      'orange-good': item.RarityLevel == 2,
                      'blue-good': item.RarityLevel == 3,
                      'purple-good': item.RarityLevel == 4,
                    }" v-for="(item, index) in useBagThings" :key="index">
										<image v-if="item.icon" class="thing-icon" :src="item.icon" mode=""></image>
										<view v-if="item.num || item.num === 0" class="thing-num">{{
                      item.num
                    }}</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>

				<!-- 任务 -->
				<view class="task-box" v-if="type == 'task'">
					<view class="top-box"></view>
					<view class="bag-bottom-tab">
						<scroll-view ref="scrollView" :scroll-x="true" style="white-space: nowrap"
							class="tab-scroll-content" :show-scrollbar="false" :scroll-with-animation="true">
							<view class="bag-tab-item" @click="handleBagTabClick(index, item)"
								:class="{ 'bag-active-tabItem': activeBagTabIndex == index }"
								v-for="(item, index) in taskTabs" :key="index">
								<view class="top-tabName">{{ item.name }}</view>
							</view>
						</scroll-view>
						<view class="tab-bottom-line">
							<view class="line-center"></view>
						</view>
					</view>
					<view class="task-progress">
						<view class="left-big-icon">
							<view class="big-icon-content">
								<view class="big-top-icon">
									<image class="big-top-icon-img"
										src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ae43581d0f594e7b8ca1a9b00abf9461.png"
										mode="aspectFill"></image>
								</view>
								<view class="big-bottom-point">50</view>
							</view>
						</view>
						<view class="right-progress-content">
							<view class="progress-content-inner">
								<view class="top-icon-box">
									<view class="icon-box-item" v-for="(item, index) in rewardProgressList"
										:key="index">
										<view class="scale-img">
											<image class="img-content img-enough"
												v-if="item.conditionPercent <= nowTaskPercent"
												src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/65d6fde890a5441e93508d5579de8f0a.png"
												mode="aspectFill"></image>
											<image class="img-content" v-else
												src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/47296cc7ded245afb32343ee3f60e5b8.png"
												mode="aspectFill"></image>
											<!-- <view class="bg-box" v-if="item.conditionPercent>nowTaskPercent"></view> -->
										</view>
										<view class="scale-icon"></view>
									</view>
								</view>
								<view class="center-progress-box">
									<view class="progeress-inner" :style="{ width: nowTaskPercent + '%' }"></view>
								</view>
								<view class="bottom-point-box">
									<view class="point-item" v-for="(item, index) in rewardProgressList" :key="index">
										<text class="scale-num">{{ item.conditionPercent }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="center-task-scroll">
						<scroll-view ref="scrollView" scroll-y class="task-scroll-content" :show-scrollbar="false"
							:scroll-with-animation="true">
							<view class="task-list">
								<view class="task-item" v-for="(item, index) in taskList" :key="index">
									<view class="top-info">
										<view class="left-title">
											<view class="title-text">{{ item.title }}</view>
										</view>
										<view class="right-progress">
											<text class="progress-tip">进度：</text>
											{{ item.currentProgress }}/{{ item.total }}
										</view>
									</view>
									<view class="center-line"></view>
									<view class="botom-content">
										<view class="left-reward">
											<view class="reward-item" v-for="(rItem, rIndex) in item.rewardList"
												:key="rIndex">
												<image class="reward-icon" :src="rItem.rewardIcon" mode="aspectFill">
												</image>
												<view class="reward-num">{{ rItem.rewardNum }}</view>
											</view>
										</view>
										<view class="right-button">
											<view class="bottom-button" v-if="item.currentProgress == item.total">领取
											</view>
											<view class="task-bottom-tip" v-else>未完成</view>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
					<view class="bottom-get-all-reward">
						<view class="get-all-btn">一键领取</view>
					</view>

					<!-- 					<view class="bottom-big-tab flex-row-center-center">
						<view class="big-tab-item flex-row-center-center" @click="handleActBottomTabClick(item,index)"
							v-for="(item,index) in actBottomTabList" :key="index">{{item.name}}
							<view class="act-item-masker" v-if="actBtIndex==index">
								<view class="masker-top-line"></view>
								<view class="border-line border-line-left">
								</view>
								<view class="border-line border-line-right">
								</view>


							</view>
						</view>
					</view> -->
				</view>

				<!-- 活动 -->
				<view class="active-box" v-if="type == 'active'">
					<view class="top-box"></view>
					<view class="active-tab-box">
						<view class="n-tab-list">
							<scroll-view ref="scrollView" :scroll-x="true" style="white-space: nowrap"
								class="tab-scroll-content" :show-scrollbar="false" :scroll-with-animation="true">
								<view class="tab-list">
									<view class="tab-item" @click="handlActiveTabItemClick(item, index)"
										:class="{ 'bag-active-tabItem': actTabIndex == index }"
										v-for="(item, index) in activeTabList" :key="index">
										<view class="tab-content">
											<view class="top-tabName">{{ item.name }}</view>
											<view class="line-box"></view>

											<image class="locked-icon" v-if="item.locked"
												src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/acb0459908234cf3b311f42f917623e5.png"
												mode="aspectFill"></image>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
					</view>

					<view class="center-active-scroll">
						<scroll-view ref="scrollView" scroll-y class="active-scroll-content" :show-scrollbar="false"
							:scroll-with-animation="true">
							<view class="active-list">
								<view class="active-item-content" @click="handleActiveItemClick(index, item)"
									v-for="(item, index) in activeList" :key="index">
									<image class="active-image" :src="item.image" mode=""></image>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>

				<!-- 排行 -->
				<view class="sort-box" v-if="type == 'sort'">
					<view class="top-box"></view>

					<view class="sort-center">
						<view class="content">
							<view class="top-sort-type">
								<view class="top-sort-content">
									<view class="sortNumber center-flex">排名
										<!-- <view class="line-icon"></view> -->
									</view>
									<view class="avatar-userName center-flex">
										玩家
										<!-- <view class="line-icon"></view> -->
									</view>

									<view class="sourceNumber center-flex">舞力值 </view>

									<view class="bottom-line"></view>
								</view>
							</view>

							<view class="sort-item bottom-my-sort-item">
								<view class="sort-item-content">
									<view class="sortNumber center-flex">未上榜</view>
									<view class="avatar-userName">
										<image class="avatar-img" :src="userSortData.avatar" mode="aspectFill">
										</image>
										<view class="sort-userName">
											<view class="top-userName">
												<view class="honer-text">{{ userSortData.honer }}</view>
												<view class="userName-text">{{
                          userSortData.userName
                        }}</view>
											</view>
											<view class="bottom-honer">
												<image class="bottom-honer-img"
													:src="honerLevelFilter(userSortData.honerLevel)" mode="aspectFill">
												</image>
											</view>
										</view>
									</view>

									<view class="sourceNumber center-flex">
										忒
									</view>
								</view>
							</view>
							<scroll-view ref="scrollView" scroll-y class="sortScrollContent" :show-scrollbar="false"
								:scroll-with-animation="true">
								<view class="sort-list">
									<view class="sort-item" v-for="(item, index) in sortLastList" :key="index">
										<view class="sort-item-content">
											<view class="sortNumber center-flex">
												<view class="top-three-icon" v-if="index <= 2">
													<image class="sort-icon" :src="sortIconSrc(index)"
														mode="aspectFill">
													</image>
												</view>
												<text class="default-sort-number" v-else>{{
                          index + 1
                        }}</text>
											</view>
											<view class="avatar-userName">
												<image class="avatar-img" :src="item.avatar" mode="aspectFill">
												</image>
												<view class="sort-userName">
													<view class="top-userName">
														<view class="honer-text">{{ item.honer }}</view>
														<view class="userName-text">{{
                              item.userName
                            }}</view>
													</view>
													<view class="bottom-honer">
														<image class="bottom-honer-img"
															:src="honerLevelFilter(item.honerLevel)" mode="aspectFill">
														</image>
													</view>
												</view>
											</view>

											<view class="sourceNumber center-flex">
												{{ item.dancePower }}
											</view>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
					</view>
					<view class="sort-bottom">
						<view class="sort-bottom-tab">
							<scroll-view ref="scrollView" :scroll-x="true" style="white-space: nowrap"
								class="tab-scroll-content" :show-scrollbar="false" :scroll-with-animation="true">
								<view class="bag-tab-item" @click="handleBagTabClick(index, item)"
									:class="{ 'bag-active-tabItem': activeBagTabIndex == index }"
									v-for="(item, index) in sortTabs" :key="index">
									<view class="top-tabName">{{ item.name }}</view>
								</view>
							</scroll-view>
						</view>
					</view>
				</view>

				<!-- 骰子返回数据 -->
				<view class="dice-result-box flex-row-center-center" v-if="type == 'reward'" @click="handleCloseModal">
					<view class="dice-result-content">
						<!-- <view class="dice-result-tip">恭喜获得</view> -->

						<view class="dice-result-tip-img flex-row-center-center">
							<image class="dice-result-tip-img-content"
								src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/9ed662ba4d2949a8a2100475e2f11ede.png"
								mode="aspectFill"></image>
						</view>

						<view class="dice-reward-list">
							<view style="white-space: nowrap" class="scroll-content flex-row-center-center">
								<view class="reward-item" :class="{
                    'green-good': item.RarityLevel == 1,
                    'orange-good': item.RarityLevel == 2,
                    'blue-good': item.RarityLevel == 3,
                    'purple-good': item.RarityLevel == 4,
                  }" v-for="(item, index) in eventData.rewardsList" :key="index">
									<image class="reward-item-icon" :src="item.imageUrl" mode="aspectFill">
									</image>
									<view class="reward-num">{{ item.count }}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="bottom-tip">
						<view class="left-point"></view>
						<view class="center-content">点击任意空白区域关闭</view>
						<view class="right-point"></view>
					</view>
				</view>

				<!-- 游历 -->
				<view class="travel-box cover-screen-position flex-column-start-center" v-if="type == 'travel'">
					<view class="top-box"></view>
					<view class="travel-top-tab">
						<view class="n-tab-list">
							<scroll-view ref="scrollView" :scroll-x="true" style="white-space: nowrap"
								class="tab-scroll-content" :show-scrollbar="false" :scroll-with-animation="true">
								<view class="tab-list">
									<view class="tab-item" @click="handlTravelTabItemClick(item, index)" :class="{
                      'bag-active-tabItem': actTravelTabIndex == index,
                    }" v-for="(item, index) in travelTabList" :key="index">
										<view class="tab-content">
											<view class="top-tabName">{{ item.name }}</view>
											<view class="line-box"></view>

											<image class="locked-icon" v-if="item.locked"
												src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/acb0459908234cf3b311f42f917623e5.png"
												mode="aspectFill"></image>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
					</view>
					<view class="travel-content">
						<scroll-view ref="scrollView" scroll-y class="scroll-content travel-content-scroll"
							:show-scrollbar="false" :scroll-with-animation="true" refresher-background="transparent">
							<view class="travel-list flex-row-between-start">
								<view class="travel-item flex-column-start-center"
									v-for="(item, index) in travelUseData" @click="handleTravelItemClick(item, index)"
									:key="index">
									<image :src="item.image" class="travel-item-bg" mode="aspectFill"></image>
									<view class="fun-level flex-row-center-center"
										:class="{'level-easy':String(item.level).includes('简单'),'level-difficult':String(item.level).includes('困难'),'level-crazy':String(item.level).includes('疯狂')}"
										v-if="actTravelType=='fun'">
										{{item.level}}
									</view>
									<view class="travel-item-bottom-info"
										:class="{'flex-row-between-center':(actTravelType=='travel'||actTravelType=='fun'),'flex-row-center-center':(actTravelType!='travel'&&actTravelType!='fun')}">
										<view class="level-name" v-if="actTravelType=='travel'">
											{{ item.level }}级·{{ item.name }}
										</view>
										<view class="travel-consume flex-row-center-center"
											v-if="actTravelType=='travel'">
											<image class="travel-consume-icon"
												src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/e7734e4527d247a2987bcf9ce416ce38.png"
												mode="aspectFill"></image>
											<view class="travel-consume-num">{{ item.consume }}</view>
										</view>


										<view class="game-name level-name" v-if="actTravelType!='travel'">
											{{item.name}}
										</view>

										<view class="travel-fun-start" v-if="actTravelType=='fun'">
											<view class="fun-start-list flex-row-end-center" v-if="item.myStars<=3">
												<view class="fun-start-item flex-row-center-center"
													v-for="(citem,cindex) in item.myStars" :key="cindex">
													<image class="cover-img"
														src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/83ea9d0d8d934f24bbc2cdfa9485304a.png"
														mode="aspectFill"></image>
												</view>
											</view>
											<view class="fun-start-list flex-row-end-center" v-if="item.myStars>3">
												<view class="fun-start-item flex-row-center-center"
													v-for="(citem,cindex) in (item.myStars-3)" :key="cindex">
													<image class="cover-img"
														src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/b873e4f641db4746a73c370d95fcd8f3.png"
														mode="aspectFill"></image>
												</view>
											</view>

										</view>

									</view>

									<view class="travel-time flex-row-start-center"
										v-if="item.traveling&&actTravelType=='travel'" @click.stop>
										<view class="travel-tip flex-row-start-center">旅行中</view>
										<image class="travel-time-icon-img"
											src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/19776958b102429aa0e1d7411f8c675c.png"
											mode="aspectFill"></image>
										<view class="travel-time-count-down flex-row-start-center">
											<u-count-down style="
                          height: 30rpx !important;
                          display: flex;
                          justify-content: flex-start;
                          align-items: center;
                          text-shadow: 0rpx 0rpx 1rpx #fff;
                          line-height: 30rpx;
                        " :timestamp="item.travelTimestamp" separator-size="18" bg-color="transparent"
												separator-color="#07c160" font-size="18" color="#07c160"></u-count-down>
										</view>
									</view>

									<view class="travel-masker flex-row-center-center" v-if="item.locked">
										<image class="travel-masker-locked"
											src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/acb0459908234cf3b311f42f917623e5.png"
											mode="aspectFill"></image>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
					<view class="bottom-box"></view>

					<view class="travel-modal cover-screen-position" v-if="showTravelModal"
						@click="handleCloseTravelModal">
						<view class="modal-content-box travel-modal-content" @click.stop>
							<view class="modal-content">
								<view class="modal-title">
									旅行计划
									<view class="bottom-line">
										<view class="line-content"></view>
									</view>
									<view class="travel-close-icon" @click="handleCloseTravelModal">
										<image class="cover-img"
											src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/a4650d9479964fee9685179a9335462d.png"
											mode="aspectFill"></image>
									</view>
								</view>

								<view class="travel-info flex-row-start-start">
									<view class="travel-picture flex-column-start-center">
										<image class="picture-img" :src="activeTravel.image" mode="aspectFill">
										</image>
										<view class="picture-name flex-row-start-center">
											{{ activeTravel.level }}级·{{ activeTravel.name }}
										</view>
									</view>
									<view class="travel-info-detail flex-column-start-start">
										<view class="travel-base-info flex-column-start-start">
											<view class="title-box title-with-bottom-line">
												<view class="title-content">
													<view class="left-tip">
														<view class="tip-icon"></view>
														<view class="tip-text">旅行时长</view>
													</view>
													<view class="right-content"> 5分钟 </view>
												</view>
											</view>
											<view class="title-box title-with-bottom-line">
												<view class="title-content">
													<view class="left-tip">
														<view class="tip-icon"></view>
														<view class="tip-text">旅行消耗</view>
													</view>
													<view class="right-content">
														<image class="consume-icon"
															src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/e7734e4527d247a2987bcf9ce416ce38.png"
															mode="aspectFill"></image>
														<view class="consume-num">x1</view>
													</view>
												</view>
											</view>
											<view class="title-box title-with-bottom-line">
												<view class="title-content">
													<view class="left-tip">
														<view class="tip-icon"></view>
														<view class="tip-text">伙伴好感</view>
													</view>
													<view class="right-content">
														<image class="consume-icon"
															src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/c49ae88f2c0340bebc08d0690b1115b4.png"
															mode="aspectFill"></image>
														<text class="consume-num">+100</text>
													</view>
												</view>
											</view>
										</view>

										<view class="travel-travelers flex-row-between-center">
											<view class="travel-member flex-column-start-center">
												<view class="travel-avatar flex-row-center-center">
													<image class="cover-img travel-avatar-img"
														src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/00207b5448134a3e851925c885076eda.jpg"
														mode="aspectFill"></image>
												</view>
												<view class="travel-name flex-row-center-center">第一收割机</view>
											</view>
											<view class="travel-member flex-column-start-center"
												@click="handleChooseSecreter">
												<view class="travel-avatar flex-row-center-center" :class="{
                            'travel-avatar-add':
                              !activeTravel.actSecreter && !tempActiveSecreter,
                          }">
													<image class="cover-img travel-avatar-img" v-if="
                              !activeTravel.actSecreter && !tempActiveSecreter
                            " src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5ed0ed0dbe4446b2ad415e9b8c841483.png"
														mode="aspectFill"></image>
													<image class="cover-img travel-avatar-img" v-if="
                              activeTravel.actSecreter &&
                              activeTravel.actSecreter.image
                            " :src="activeTravel.actSecreter.image" mode="aspectFill"></image>
													<image class="cover-img travel-avatar-img" v-if="
                              tempActiveSecreter &&
                              tempActiveSecreter.image &&
                              !activeTravel.actSecreter
                            " :src="tempActiveSecreter.image" mode="aspectFill"></image>
												</view>
												<view class="travel-name">
													<text v-if="
                              !activeTravel.actSecreter && !tempActiveSecreter
                            ">邀请伙伴</text>
													<text v-if="
                              activeTravel.actSecreter &&
                              activeTravel.actSecreter.name
                            ">{{ activeTravel.actSecreter.name }}</text>
													<text v-if="
                              tempActiveSecreter.name &&
                              !activeTravel.actSecreter
                            ">{{ tempActiveSecreter.name }}</text>
												</view>
											</view>
										</view>
									</view>
								</view>

								<view class="title-box">
									<view class="title-content">
										<view class="left-tip">
											<view class="tip-icon"></view>
											<view class="tip-text">旅行奖励</view>
										</view>
										<view class="right-content"></view>
									</view>
								</view>

								<view class="n-reward-list">
									<scroll-view :scroll-x="true" style="white-space: nowrap" class="scroll-content">
										<view class="reward-item good-after-before" :class="{
                      'green-good': item.RarityLevel == 1,
                      'orange-good': item.RarityLevel == 2,
                      'blue-good': item.RarityLevel == 3,
                      'purple-good': item.RarityLevel == 4,
                    }" v-for="(item, index) in travelRewardList" :key="index">
											<image class="reward-item-icon" :src="item.icon" mode="aspectFill">
											</image>
											<view class="reward-num">{{ item.num }}</view>
										</view>
									</scroll-view>
								</view>

								<view class="consume-box" v-if="!activeTravel.traveling">
									<image class="consume-icon"
										src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/e7734e4527d247a2987bcf9ce416ce38.png"
										mode="aspectFill"></image>
									<view class="consume-number">
										<text class="num">0</text>
										/
										<text class="need-num">1</text>
									</view>
								</view>

								<view class="btn-box flex-row-center-center">
									<view class="btn-item" @click="handleStartTravel" v-if="!activeTravel.traveling">
										<view class="btn-content start-live-btn"> 开始旅行 </view>
									</view>

									<view class="travel-count-down-box flex-row-start-center"
										v-if="activeTravel.traveling">
										<image class="travel-time-icon-img"
											src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/19776958b102429aa0e1d7411f8c675c.png"
											mode="aspectFill"></image>
										<u-count-down style="
                        height: 100% !important;
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        text-shadow: 0rpx 0rpx 1rpx #fff;
                        line-height: 30rpx;
                      " :timestamp="activeTravel.travelTimestamp" separator-size="24" bg-color="transparent"
											separator-color="#07c160" font-size="24" color="#07c160"></u-count-down>
									</view>
								</view>
							</view>
						</view>

						<view class="bottom-tip">
							<view class="left-point"></view>
							<view class="center-content">点击任意空白区域关闭</view>
							<view class="right-point"></view>
						</view>
					</view>

					<view class="choose-secretary-modal cover-screen-position" v-if="showSecretaryChooseModal">
						<view class="modal-content-box choose-secretary-modal-content">
							<view class="modal-content">
								<view class="modal-title">
									选择秘书
									<view class="bottom-line">
										<view class="line-content"></view>
									</view>
									<view class="close-icon" @click="handleCloseSecretaryChooseModal">
										<image class="close-icon-img"
											src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/a4650d9479964fee9685179a9335462d.png"
											mode="aspectFill"></image>
									</view>
								</view>

								<view class="person-choose-list">
									<scroll-view :scroll-y="true" class="scroll-content">
										<view class="person-item" @click="handleSecreteClick(item, index)" :class="{
                        'active-person-item': activeSecreterIndex == index,
                      }" v-for="(item, index) in secretaryList" :key="index">
											<image class="person-item-icon" :src="item.image" mode="aspectFill">
											</image>
											<view class="person-type-icon living" v-if="item.traveling">旅行中</view>
											<view class="person-type-icon free" v-if="!item.traveling">空闲</view>
											<view class="choosed-icon"
												v-if="!item.traveling && index == activeSecreterIndex">
												<image class="choosed-icon-img"
													src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/f6461cc205bf4e968bbb6f50728daf23.png"
													mode="aspectFill"></image>
											</view>
											<view class="choose-masker-box"
												v-if="!item.traveling && index == activeSecreterIndex"></view>
											<view class="person-bottom-info">
												<view class="person-name">{{ item.name }}</view>
											</view>
											<view class="info-bottom"></view>
										</view>
									</scroll-view>
								</view>

								<view class="secreter-choose-confirm">
									<view class="btn-box flex-row-center-center">
										<view class="btn-item">
											<view class="btn-content start-live-btn" @click="handleConfirmSecreter">
												确 定
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 事件弹窗 -->
				<view class="event-box cover-screen-position" v-if="type == 'event'" @click="handleCloseModal">
					<view class="modal-content-box event-modal-content" @click.stop>
						<view class="modal-content flex-column-start-center">
							<view class="modal-title">
								{{ eventData.diceName }}
								<view class="bottom-line">
									<view class="line-content"></view>
								</view>
								<view class="close-icon" @click="handleEventModalClose('reward')">
									<image class="close-icon-img"
										src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/a4650d9479964fee9685179a9335462d.png"
										mode="aspectFill"></image>
								</view>
							</view>
							<!-- 事件介绍 -->
							<view class="event-intro">
								<!-- 会议事件-介绍-测试 -->
								<view class="event-meeting-intro">
									<image class="cover-img" :src="eventData.coverUrl" mode="aspectFill"></image>
								</view>
							</view>
							<!-- 事件奖励 -->
							<view class="event-rewards">
								<!-- 会议事件-奖励-测试 -->
								<view class="meeting-event-rewards">
									<view class="title-box">
										<view class="title-content">
											<view class="left-tip">
												<view class="tip-icon"></view>
												<view class="tip-text">收益奖励</view>
											</view>
											<view class="right-content"></view>
										</view>
									</view>
									<view class="n-reward-list">
										<scroll-view :scroll-x="true" style="white-space: nowrap"
											class="scroll-content">
											<view class="reward-item" :class="{
                          'green-good': item.RarityLevel == 1,
                          'orange-good': item.RarityLevel == 2,
                          'blue-good': item.RarityLevel == 3,
                          'purple-good': item.RarityLevel == 4,
                        }" v-for="(item, index) in eventData.rewardsList" :key="index">
												<image class="reward-item-icon" :src="item.imageUrl" mode="aspectFill">
												</image>
												<view class="reward-num">{{ item.count }}</view>
											</view>
										</scroll-view>
									</view>
								</view>
							</view>
							<!-- 事件交互按钮 -->
							<view class="event-btns">
								<view class="meeting-event-btns">
									<view class="btn-box flex-row-center-center">
										<view class="btn-item" @click="handleGetEventReward" v-if="
                        !String(eventData.eventType).includes(
                          'event-interactive'
                        )
                      ">
											<view class="btn-content start-live-btn"> 领取奖励 </view>
										</view>
										<view class="btn-item" @click="handleInterActiveGoTo()" v-if="
                        String(eventData.eventType).includes(
                          'event-interactive'
                        )
                      ">
											<view class="btn-content start-live-btn"> 前往 </view>
										</view>
									</view>
								</view>
							</view>
						</view>

						<view class="event-auto-get-reward">
							<text v-if="String(eventData.eventType).includes('default')">点击空白区域（{{
                  rewardAutoWaitSeconds
                }}s后）自动领取奖励</text>
							<text
								v-if="String(eventData.eventType).includes('event-interactive')">点击空白区域关闭，进入待办事项查看</text>
						</view>
					</view>
				</view>
				<girlDevelopModal ref="girlDevelopModal" useType="girl" @close="handleGirlDevelopModalClose">
				</girlDevelopModal>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations,
		mapState
	} from "vuex";
	import girlDevelopModal from "./girl-develop-modal.vue";
	import mBack from "@/components/m-back/index.vue";
	import {
		getDanceList
	} from "@/api/game.js"
	import {
		getStartList,
		handleReturnRarityLevelUrl
	} from "@/utils/tools.js"

	export default {
		props: {
			storyId: {
				type: String,
				default: "",
			},
		},
		components: {
			girlDevelopModal,
			mBack,
		},
		filters: {
			goodsPriceFilter(value) {
				if (value) {
					return Number(value).toFixed(2) + "元";
				} else {
					return "免费";
				}
			},
			goodsNumFilter(value) {},
		},

		data() {
			return {
				type: "team",
				showTip: false,
				tipTimeOutId: null,
				tipText: "",
				show: false,
				isHideBack: false,
				isChangeAvatar: false,
				// 事件弹框相关数据
				rewardAudioContext: null,
				rewardAutoWaitSeconds: 3,
				eventData: {
					eventType: "event-default", //event-interactive 交互事件  event-default 非交互事件
					diceName: "",
					coverUrl: "",
					rewardsList: [

					],
				},
				// 游历相关数据
				tempActiveSecreter: null,
				showTravelModal: false,
				showSecretaryChooseModal: false,
				activeSecreterIndex: -1,
				actTravelTabIndex: 0,
				actTravelType: "fun",
				travelTabList: [{
						name: "派对",
						type: "fun",
					},
					{
						name: "静修",
						type: "retreat",
					},
					{
						name: "旅行",
						type: "travel",
					},
					{
						name: "梦境",
						type: "dream",
					},

				],
				secretaryList: [{
						id: 0,
						name: "秘书",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/a3939145c28c46cb9805572571c8efd6.jpg",
						type: "person",
						start: 3,
						RarityLevel: 4,
						level: 30,
						traveling: false,
						popularity: 2000,
					},
					{
						id: 1,
						name: "秘书",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/8d48c9e5c0fc4bb7a9d78d84400b079b.jpg",
						type: "person",
						start: 5,
						RarityLevel: 4,
						level: 31,
						traveling: false,
						popularity: 3000,
					},
					{
						id: 2,
						name: "秘书",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ca8d18090cac4ef9903e213f2d2d3402.jpg",
						type: "person",
						start: 4,
						RarityLevel: 4,
						level: 28,
						traveling: false,
						popularity: 4000,
					},
					{
						id: 3,
						name: "米娜",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5c6ee974733046a795a0c0e7cc3af818.jpg",
						type: "person",
						start: 3,
						RarityLevel: 3,
						level: 30,
						traveling: false,
						popularity: 5000,
					},
					{
						id: 4,
						name: "米娜",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/14784ddce0aa47f6b44d09e769e371e3.jpg",
						type: "person",
						start: 3,
						RarityLevel: 3,
						level: 33,
						traveling: false,
						popularity: 12000,
					},
					{
						id: 5,
						name: "妙陈",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/78add5080d4f4a229f87daa847caad2e.jpg",
						type: "person",
						start: 5,
						RarityLevel: 3,
						level: 35,
						traveling: false,
						popularity: 20000,
					},
				],
				travelRewardList: [{
						name: "金币",
						type: "prop",
						num: 10000,
						// icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/7a219d3867854845bd5dbac5568d9b52.png",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/38de7531db5e4be8b8e6cd49dbacb0eb.png",
						isEmpty: false,
						RarityLevel: 1,
					},
					{
						name: "以太币",
						type: "prop",
						num: 2000,
						// icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/dfda2fb6be7744a0a739ba0f50eb4f86.png",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/b4487873c4354b26ad8a6146760c0830.png",
						isEmpty: false,
						RarityLevel: 2,
					},

					{
						name: "抽奖券",
						type: "equipment",
						num: 1,
						// icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/939dfdef23b44b3bbc10401de05538bc.png",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/6035c864cda949ceaa64ec009d3fcdc9.png",
						isEmpty: false,
						RarityLevel: 3,
					},
					{
						name: "回忆碎片",
						type: "equipment",
						num: 1,
						// icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/15ab0cd4e30346a8ab20d9d35401a45d.png",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/965596a07ce5483481d6aa73455443a1.png",
						isEmpty: false,
						RarityLevel: 4,
					},
				],
				activeTravel: {
					image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/2e850df8123b408b8ca13989e1e0669c.jpg",
					level: 10,
					consume: 1,
					name: "巴黎铁塔",
					locked: false,
					traveling: false,
					actSecreter: null,
					travelTimestamp: 300,
				},
				travelUseData: [],
				travelDreamList: [{
					name: "初次约会",
					image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/1d9c202963234e309f8fec36c94f55a4.jpg",
					storyId: "S038TTK"
				}],
				travelList: [{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/2e850df8123b408b8ca13989e1e0669c.jpg?x-oss-process=image/resize,m_lfit,h_300,w_200",
						level: 10,
						consume: 1,
						name: "巴黎铁塔",
						locked: false,
						traveling: false,
						actSecreter: null,
						travelTimestamp: 300,
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/bef72c5dee6f45a4b61e26e92176fec0.jpg?x-oss-process=image/resize,m_lfit,h_300,w_200",
						level: 10,
						consume: 1,
						name: "天坛公园",
						locked: false,
						traveling: false,
						actSecreter: null,
						travelTimestamp: 300,
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/45ccb9fe9d7d477496c219671da492c8.jpg?x-oss-process=image/resize,m_lfit,h_300,w_200",
						level: 10,
						consume: 1,
						name: "万里长城",
						locked: false,
						traveling: false,
						actSecreter: null,
						travelTimestamp: 300,
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/079f15facd9c430baf592d3b4e1522ad.jpg?x-oss-process=image/resize,m_lfit,h_300,w_200",
						level: 10,
						consume: 1,
						name: "颐和园",
						locked: false,
						traveling: false,
						actSecreter: null,
						travelTimestamp: 300,
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ed6a1be6ee76496e991faede19292b94.jpg?x-oss-process=image/resize,m_lfit,h_300,w_200",
						level: 10,
						consume: 1,
						name: "雷峰塔",
						locked: false,
						traveling: false,
						actSecreter: null,
						travelTimestamp: 300,
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/bd7ed68a401146199ec27211cb9b9c99.jpg?x-oss-process=image/resize,m_lfit,h_300,w_200",
						level: 20,
						consume: 1,
						name: "东方明珠",
						locked: true,
						traveling: false,
						actSecreter: null,
						travelTimestamp: 300,
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/3b3552adf96d4da9a6da20ae4a6ffd80.jpg?x-oss-process=image/resize,m_lfit,h_300,w_200",
						level: 20,
						consume: 1,
						name: "故宫",
						locked: true,
						traveling: false,
						actSecreter: null,
						travelTimestamp: 300,
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/dbc89e1d906e4240a03ec606915a8889.jpg?x-oss-process=image/resize,m_lfit,h_300,w_200",
						level: 30,
						consume: 1,
						name: "莫高窟",
						locked: true,
						traveling: false,
						actSecreter: null,
						travelTimestamp: 300,
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/86ba356c94684f8e9022c34b375b921a.jpg?x-oss-process=image/resize,m_lfit,h_300,w_200",
						level: 30,
						consume: 1,
						name: "兵马俑",
						locked: true,
						traveling: false,
						actSecreter: null,
						travelTimestamp: 300,
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/1e45505406724e599ea2fa17fec9e5d0.jpg?x-oss-process=image/resize,m_lfit,h_300,w_200",
						level: 40,
						consume: 1,
						name: "布达拉宫",
						locked: true,
						traveling: false,
						actSecreter: null,
						travelTimestamp: 300,
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/270eb166290d432a9857cd0788581cfb.jpg?x-oss-process=image/resize,m_lfit,h_300,w_200",
						level: 40,
						consume: 1,
						name: "广州塔",
						locked: true,
						traveling: false,
						actSecreter: null,
						travelTimestamp: 300,
					},
				],
				miniGameList: [{
						name: "木鱼",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/df828ad53dde48689daa8645e1ae5c39.jpg?x-oss-process=image/resize,m_lfit,h_300,w_200",
						storyId: "S037CYO"
					},
					{
						name: "佛珠",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/8c78bf8bf86f44058573f88cb7ab8209.jpg?x-oss-process=image/resize,m_lfit,h_300,w_200",
						storyId: "S038RVA"
					},
				],
				travelFunList: [{
					name: "心动音律",
					image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/d1fab4074a5d4308874e11fc0df8b932.jpg?x-oss-process=image/resize,m_lfit,h_300,w_200",
					storyId: "S039KFW"
				}, ],
				// 骰子相关数据
				diceCloseTimeOutId: null,
				diceRewardList: [{
						name: "金币",
						type: "prop",
						num: 10000,
						// icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/7a219d3867854845bd5dbac5568d9b52.png",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/38de7531db5e4be8b8e6cd49dbacb0eb.png",
						isEmpty: false,
						RarityLevel: 1,
					},
					{
						name: "以太币",
						type: "prop",
						num: 2000,
						// icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/dfda2fb6be7744a0a739ba0f50eb4f86.png",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/b4487873c4354b26ad8a6146760c0830.png",
						isEmpty: false,
						RarityLevel: 2,
					},

					{
						name: "抽奖券",
						type: "equipment",
						num: 1,
						// icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/939dfdef23b44b3bbc10401de05538bc.png",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/6035c864cda949ceaa64ec009d3fcdc9.png",
						isEmpty: false,
						RarityLevel: 3,
					},
					{
						name: "回忆碎片",
						type: "equipment",
						num: 1,
						// icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/15ab0cd4e30346a8ab20d9d35401a45d.png",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/965596a07ce5483481d6aa73455443a1.png",
						isEmpty: false,
						RarityLevel: 4,
					},
				],

				// 用户相关数据
				isUserDataEdit: false,
				constellationIndex: 0,
				showConstellation: false,

				constellationArr: [
					"摩羯座", // Capricorn (12月22日 - 1月19日)
					"水瓶座", // Aquarius (1月20日 - 2月18日)
					"双鱼座", // Pisces (2月19日 - 3月20日)
					"白羊座", // Aries (3月21日 - 4月19日)
					"金牛座", // Taurus (4月20日 - 5月20日)
					"双子座", // Gemini (5月21日 - 6月20日)
					"巨蟹座", // Cancer (6月21日 - 7月22日)
					"狮子座", // Leo (7月23日 - 8月22日)
					"处女座", // Virgo (8月23日 - 9月22日)
					"天秤座", // Libra (9月23日 - 10月22日)
					"天蝎座", // Scorpio (10月23日 - 11月21日)
					"射手座", // Sagittarius (11月22日 - 12月21日)
				],
				historyUserInfo: {
					avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/00207b5448134a3e851925c885076eda.jpg",
					avatarBorder: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/b727032d90a442e98bbbe2dbf17da937.png",
				},
				userInfo: {
					avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/00207b5448134a3e851925c885076eda.jpg",
					avatarBorder: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/b727032d90a442e98bbbe2dbf17da937.png",
					age: 18,
					birthday: "12月",
					constellation: "射手座",
					signature: "我就是我，不一样的烟火~",
				},
				activeAvatarIndex: -1,
				activeAvatarBoderIndex: -1,
				actUserAvatarType: "avatar",
				avatarBoderList: [{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/41001bcaa1cf4fd7b88a891430d36542.png",
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/877fa06d1c9a415caeaa4a61f3e6ab61.png",
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/e5bad4b94c4441daa5c8feac3eca5b14.png",
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/d02d781ee76c41768955ecddffa17b33.png",
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/b0519895b5e0456b8899d29d227a2385.png",
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/86819c44d3e34751861abe07246a0443.png",
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/b727032d90a442e98bbbe2dbf17da937.png",
					},
				],
				avatarList: [{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/567b29869af94c57b29e93c1c056b2b4.jpg",
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/76a8366303e94b35a39c907aece1776f.jpg",
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/bbb6a07f82dc4a49b23c293decb934dd.jpg",
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/29b157fea2ea402bb138f88e6445d6bb.jpg",
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/a5d93d7b1d9e443788700ecf297c8cdd.jpg",
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/a02b5ac1265646b9ae6f07a24aded471.jpg",
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/76bd4c499b9f49bb887f3f2b00795a0a.jpg",
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/156a0d00322149eca6aafe0ef1954f1f.jpg",
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/d480386498fd446aa625d2f98c99298d.jpg",
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/f4f6c7b9730940468a33ba15f366c3d6.jpg",
					},

					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5c291adbaffe4b2da98de94c3cd0945b.jpg",
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/e9343fd8c3d64b44946b2298d230cd95.jpg",
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/89a49995f9a9439e8ab4790a33b7c279.jpg",
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/7901eac3ce4345ff93952a46423d74f6.jpg",
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/2d4e9cc7d2c24635be05c76e0a5ba235.jpg",
					},

					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/bb421ba3122647bcbd8ccc1555c33645.jpg",
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/e469eee5b29a42a2ac8866edfa152606.jpg",
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/221d68e2fdeb489b9df52af883de4cd9.jpg",
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/7488bdcd5bfc43adbcddc38bc50cabab.jpg",
					},
				],
				userAvatarChangeTab: [{
						name: "头像",
						type: "avatar",
					},
					{
						name: "头像框",
						type: "border",
					},
				],
				userTabList: [{
						name: "主页",
						type: "info",
					},

					{
						name: "资料",
						type: "data",
					},
					{
						name: "设置",
						type: "setting",
					},
				],
				activeUserTabType: "info",
				honerList: [{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5e28d6491f1345ddbc8d800e5eec7704.png",
						locked: false,
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/eb73126fc164412ba60a9864c5fe8a3c.png",
						locked: false,
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/91c2b62b682349b291c40e3e41c71337.png",
						locked: true,
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/efd29e54207e44d7851bdcb05a999daf.png",
						locked: true,
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/eedb0f12575145be99e4340fdb78f30a.png",
						locked: true,
					},
					{
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5c038fdc7fa044c18c71b01d619be6a3.png",
						locked: true,
					},
				],
				// 排行相关数据
				sortTabs: [{
						name: "舞力榜",
						type: "dance",
					},
					{
						name: "成就榜",
						type: "achievement",
					},
					{
						name: "心动榜",
						type: "heart",
					},
					{
						name: "小时榜",
						type: "hours",
					},
					{
						name: "今日榜",
						type: "today",
					},
					{
						name: "本周榜",
						type: "week",
					},
				],
				sortIconList: [
					"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ddd87efc45494316a7ef10612b4aac1b.png",
					"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/d16850e51b384f81b06d0f4311d77f25.png",
					"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/d7548cc3949446e4ac0820e0242f6059.png",
				],
				userSortData: {
					userName: "第一收割机",
					level: 30,
					dancePower: 777,
					popularity: 888,
					Beckoning: 777,
					avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/00207b5448134a3e851925c885076eda.jpg",
					honer: "新星总裁10阶",
					honerLevel: 3,
				},
				sortTotalList: [],
				honerLevelList: [{
						level: 1,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5e28d6491f1345ddbc8d800e5eec7704.png",
					},
					{
						level: 2,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/eb73126fc164412ba60a9864c5fe8a3c.png",
					},
					{
						level: 3,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/91c2b62b682349b291c40e3e41c71337.png",
					},
					{
						level: 4,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/efd29e54207e44d7851bdcb05a999daf.png",
					},
					{
						level: 5,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/eedb0f12575145be99e4340fdb78f30a.png",
					},
					{
						level: 6,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5c038fdc7fa044c18c71b01d619be6a3.png",
					},
				],
				sortLastList: [{
						userName: "西门大官人",
						level: 30,
						dancePower: 993,
						popularity: 888,
						Beckoning: 777,
						avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/8e8d014dcfce4e85bee7fe6d5911ca0a.jpg",
						honer: "新星总裁10阶",
						honerLevel: 6,
					},
					{
						userName: "二号玩家",
						level: 30,
						dancePower: 992,
						popularity: 888,
						Beckoning: 777,
						avatar: "https://cdn.osisx.com/MEMBER/1751587426788548608//1f0da7d80eea4d58bfda51ee8012900c.jpg",
						honer: "新星总裁10阶",
						honerLevel: 6,
					},
					{
						userName: "三号玩家",
						level: 30,
						dancePower: 991,
						popularity: 888,
						Beckoning: 777,
						avatar: "https://cdn.osisx.com/MEMBER/1751587426788548608//432d50b16c1b4ec7845c31ebb31d1331.jpg",
						honer: "新星总裁10阶",
						honerLevel: 6,
					},
					{
						userName: "四号玩家",
						level: 30,
						dancePower: 991,
						popularity: 888,
						Beckoning: 777,
						avatar: "https://cdn.osisx.com/game/image/8f55e1de60aa46f881aeaab72dac1c1d.png",
						honer: "新星总裁10阶",
						honerLevel: 5,
					},
					{
						userName: "五号玩家",
						level: 30,
						dancePower: 991,
						popularity: 888,
						Beckoning: 777,
						avatar: "https://cdn.osisx.com/game/image/90865d05e47447ce9d17fc0074e79be6.png",
						honer: "新星总裁10阶",
						honerLevel: 5,
					},
					{
						userName: "六号玩家",
						level: 30,
						dancePower: 991,
						popularity: 888,
						Beckoning: 777,
						avatar: "https://cdn.osisx.com/game/image/62330d28cdd44003bc5665f9afb4af3b.jpg",
						honer: "新星总裁10阶",
						honerLevel: 5,
					},
					{
						userName: "七号玩家",
						level: 30,
						dancePower: 991,
						popularity: 888,
						Beckoning: 777,
						avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/adfafcd24d0347fcb7fce7042ac60e40.jpg",
						honer: "新星总裁10阶",
						honerLevel: 4,
					},
					{
						userName: "八号玩家",
						level: 30,
						dancePower: 991,
						popularity: 888,
						Beckoning: 777,
						avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/adfafcd24d0347fcb7fce7042ac60e40.jpg",
						honer: "新星总裁10阶",
						honerLevel: 4,
					},
					{
						userName: "九号玩家",
						level: 30,
						dancePower: 991,
						popularity: 888,
						Beckoning: 777,
						avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/adfafcd24d0347fcb7fce7042ac60e40.jpg",
						honer: "新星总裁10阶",
						honerLevel: 4,
					},
					{
						userName: "十号玩家",
						level: 30,
						dancePower: 991,
						popularity: 888,
						Beckoning: 777,
						avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/adfafcd24d0347fcb7fce7042ac60e40.jpg",
						honer: "新星总裁10阶",
						honerLevel: 3,
					},
					{
						userName: "十一号玩家家",
						level: 30,
						dancePower: 991,
						popularity: 888,
						Beckoning: 777,
						avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/adfafcd24d0347fcb7fce7042ac60e40.jpg",
						honer: "新星总裁10阶",
						honerLevel: 3,
					},
					{
						userName: "十一号玩家家家",
						level: 30,
						dancePower: 991,
						popularity: 888,
						Beckoning: 777,
						avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/adfafcd24d0347fcb7fce7042ac60e40.jpg",
						honer: "新星总裁10阶",
						honerLevel: 3,
					},
					{
						userName: "十一号玩家家家",
						level: 30,
						dancePower: 991,
						popularity: 888,
						Beckoning: 777,
						avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/adfafcd24d0347fcb7fce7042ac60e40.jpg",
						honer: "新星总裁10阶",
						honerLevel: 3,
					},
				],
				sortTopThreeList: [{
						userName: "亮哥哥",
						level: 30,
						dancePower: 999,
						popularity: 888,
						Beckoning: 777,
						avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/adfafcd24d0347fcb7fce7042ac60e40.jpg",
					},
					{
						userName: "凯哥哥",
						level: 27,
						dancePower: 996,
						popularity: 998,
						Beckoning: 563,
						avatar: "https://cdn.osisx.com/game/image/90ac07e2c8984aa19479ecd6d0255b50.jpg",
					},
					{
						userName: "震哥哥",
						level: 28,
						dancePower: 866,
						popularity: 855,
						Beckoning: 833,
						avatar: "https://cdn.osisx.com/game/image/13bbe10ec6bc48d6903e0a19d3275177.jpg",
					},
				],
				// 房间相关数据
				nowTaskPercent: 20,
				// 任务相关数据
				rewardProgressList: [{
						isReceive: false,
						conditionPercent: 20,
					},
					{
						isReceive: false,
						conditionPercent: 40,
					},
					{
						isReceive: false,
						conditionPercent: 60,
					},
					{
						isReceive: false,
						conditionPercent: 80,
					},
					{
						isReceive: false,
						conditionPercent: 100,
					},
				],
				useTaskList: [],
				taskList: [{
						title: "完成公司运营1次",
						total: 1,
						currentProgress: 1,
						// rewardIcon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/7a219d3867854845bd5dbac5568d9b52.png",

						rewardList: [{
								name: "经验",
								rewardIcon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ae43581d0f594e7b8ca1a9b00abf9461.png",
								rewardNum: 10,
							},
							{
								name: "钻石",
								rewardIcon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/edce6088050449b1a1087714ca53df86.png",
								rewardNum: 100,
							},
							{
								name: "金币",
								rewardIcon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/284a2f99122a447689c43a9687ef3dd9.png",
								rewardNum: 500,
							},
						],
						type: "daily",
					},
					{
						title: "公司等级达到2级",
						total: 2,
						currentProgress: 1,
						// rewardIcon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/7a219d3867854845bd5dbac5568d9b52.png",
						rewardIcon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ae43581d0f594e7b8ca1a9b00abf9461.png",
						rewardNum: 3000,
						rewardList: [{
								name: "经验",
								rewardIcon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ae43581d0f594e7b8ca1a9b00abf9461.png",
								rewardNum: 10,
							},
							{
								name: "钻石",
								rewardIcon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/edce6088050449b1a1087714ca53df86.png",
								rewardNum: 100,
							},
							{
								name: "金币",
								rewardIcon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/284a2f99122a447689c43a9687ef3dd9.png",
								rewardNum: 500,
							},
						],
						type: "daily",
					},
					{
						title: "强化装备1次",
						total: 1,
						currentProgress: 0,
						// rewardIcon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/dfda2fb6be7744a0a739ba0f50eb4f86.png",
						rewardIcon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ae43581d0f594e7b8ca1a9b00abf9461.png",
						rewardNum: 500,
						rewardList: [{
								name: "经验",
								rewardIcon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ae43581d0f594e7b8ca1a9b00abf9461.png",
								rewardNum: 10,
							},
							{
								name: "钻石",
								rewardIcon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/edce6088050449b1a1087714ca53df86.png",
								rewardNum: 100,
							},
							{
								name: "金币",
								rewardIcon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/284a2f99122a447689c43a9687ef3dd9.png",
								rewardNum: 500,
							},
						],
						type: "daily",
					},
					{
						title: "通过挂机获得500金币",
						total: 500,
						currentProgress: 421,
						// rewardIcon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/7a219d3867854845bd5dbac5568d9b52.png",
						rewardIcon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ae43581d0f594e7b8ca1a9b00abf9461.png",
						rewardNum: 2000,
						rewardList: [{
								name: "经验",
								rewardIcon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ae43581d0f594e7b8ca1a9b00abf9461.png",
								rewardNum: 10,
							},
							{
								name: "钻石",
								rewardIcon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/edce6088050449b1a1087714ca53df86.png",
								rewardNum: 100,
							},
							{
								name: "金币",
								rewardIcon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/284a2f99122a447689c43a9687ef3dd9.png",
								rewardNum: 500,
							},
						],
						type: "weekly",
					},
					{
						title: "累计提升卡牌等级650次",
						total: 650,
						currentProgress: 556,
						// rewardIcon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/939dfdef23b44b3bbc10401de05538bc.png",
						rewardIcon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ae43581d0f594e7b8ca1a9b00abf9461.png",
						rewardNum: 30,
						rewardList: [{
								name: "经验",
								rewardIcon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ae43581d0f594e7b8ca1a9b00abf9461.png",
								rewardNum: 10,
							},
							{
								name: "钻石",
								rewardIcon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/edce6088050449b1a1087714ca53df86.png",
								rewardNum: 100,
							},
							{
								name: "金币",
								rewardIcon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/284a2f99122a447689c43a9687ef3dd9.png",
								rewardNum: 500,
							},
						],
						type: "weekly",
					},
					{
						title: "进行快速挂机10次",
						total: 10,
						currentProgress: 2,
						// rewardIcon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/939dfdef23b44b3bbc10401de05538bc.png",
						rewardIcon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ae43581d0f594e7b8ca1a9b00abf9461.png",
						rewardNum: 50,
						rewardList: [{
								name: "经验",
								rewardIcon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ae43581d0f594e7b8ca1a9b00abf9461.png",
								rewardNum: 10,
							},
							{
								name: "钻石",
								rewardIcon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/edce6088050449b1a1087714ca53df86.png",
								rewardNum: 100,
							},
							{
								name: "金币",
								rewardIcon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/284a2f99122a447689c43a9687ef3dd9.png",
								rewardNum: 500,
							},
						],
						type: "weekly",
					},
					{
						title: "拥有21级以上卡牌8张",
						total: 8,
						currentProgress: 1,
						// rewardIcon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/dfda2fb6be7744a0a739ba0f50eb4f86.png",
						rewardIcon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ae43581d0f594e7b8ca1a9b00abf9461.png",
						rewardNum: 2000,
						rewardList: [{
								name: "经验",
								rewardIcon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ae43581d0f594e7b8ca1a9b00abf9461.png",
								rewardNum: 10,
							},
							{
								name: "钻石",
								rewardIcon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/edce6088050449b1a1087714ca53df86.png",
								rewardNum: 100,
							},
							{
								name: "金币",
								rewardIcon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/284a2f99122a447689c43a9687ef3dd9.png",
								rewardNum: 500,
							},
						],
						type: "main",
					},
					{
						title: "玩家等级到达50级",
						total: 50,
						currentProgress: 30,
						// rewardIcon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/15ab0cd4e30346a8ab20d9d35401a45d.png",
						rewardIcon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ae43581d0f594e7b8ca1a9b00abf9461.png",
						rewardNum: 500,
						rewardList: [{
								name: "经验",
								rewardIcon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ae43581d0f594e7b8ca1a9b00abf9461.png",
								rewardNum: 10,
							},
							{
								name: "钻石",
								rewardIcon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/edce6088050449b1a1087714ca53df86.png",
								rewardNum: 100,
							},
							{
								name: "金币",
								rewardIcon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/284a2f99122a447689c43a9687ef3dd9.png",
								rewardNum: 500,
							},
						],
						type: "main",
					},
				],
				taskTabs: [{
						name: "每日",
						type: "dayly",
					},
					{
						name: "每周",
						type: "weekly",
					},
					{
						name: "主线",
						type: "main",
					},
					{
						name: "补给",
						type: "supply",
					},
					// {
					// 	name: "签到",
					// 	type: "main",
					// },
					// {
					// 	name: "补给",
					// 	type: "main",
					// },
				],
				// 活动相关数据
				actTabIndex: 0,
				actBtIndex: 0,
				activeTabList: [{
						name: "精彩推荐",
						type: "recommend",
					},
					{
						name: "限时福利",
						type: "benefits",
					},
					{
						name: "分享有礼",
						type: "share",
					},
					{
						name: "签到奖励",
						type: "signIn",
					},
				],
				actBottomTabList: [{
						name: "任务",
					},
					{
						name: "成就",
					},
					{
						name: "签到",
					},
					{
						name: "补给",
					},
				],
				activeList: [
					// {
					// 	name: "",
					// 	time: "",
					// 	image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/3eb9a23218f44c529ef81ee8d4e5a47d.jpg"
					// },
					{
						name: "",
						time: "",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/d070f1a47d17416db5503e31e0c3fd94.jpg",
					},
					{
						name: "",
						time: "",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5c0de4f5b7ad4cf0bec994a70f30a7db.jpg",
					},
					{
						name: "",
						time: "",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/dbb3b04cc5aa4fab8a09443736e041c5.jpg",
					},
					{
						name: "",
						time: "",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/89442cc30fe74ba8b791333fa5a1b55e.jpg",
					},
				],
				// 背包相关数据 equipment prop
				activeBagTabIndex: 0,
				bagTabs: [{
						name: "全部",
						type: "whole",
					},
					{
						name: "装备",
						type: "equipment",
					},
					{
						name: "道具",
						type: "prop",
					},
					{
						name: "碎片",
						type: "fragment",
					},
					{
						name: "礼物",
						type: "gift",
					},
				],
				emptyBagThings: [{
						isEmpty: true,
					},
					{
						isEmpty: true,
					},
					{
						isEmpty: true,
					},
					{
						isEmpty: true,
					},
				],
				bagThings: [{
						name: "金币",
						type: "prop",
						num: 10000,
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/531cc17604ec435286166761419a50e2.png",
						RarityLevel: 1,
					},
					{
						name: "以太币",
						type: "prop",
						num: 2000,
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/178967f2db9e4b21b9250c0c4ba950ad.png",
						RarityLevel: 2,
					},
					{
						name: "改名卡",
						type: "prop",
						num: 1,
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/d7e3221ac72943e4b6c8bd5aee2cabca.png",
						RarityLevel: 3,
					},
					{
						name: "抽奖券",
						type: "equipment",
						num: 1,
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/6ab855888adc45e4820e99cc55856d06.png",
						RarityLevel: 4,
					},
					{
						name: "回忆碎片",
						type: "equipment",
						num: 1,
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/b40170e0022b4cb9ad87eb6e5bbc532d.png",
						RarityLevel: 1,
					},

					//
					{
						name: "回忆碎片",
						type: "equipment",
						num: 1,
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/366f960ebbe8430f916cb6d917051ed4.png",
						RarityLevel: 2,
					},
					{
						name: "回忆碎片",
						type: "equipment",
						num: 1,
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/828c553753b842718c000ab89fb13f01.png",
						RarityLevel: 3,
					},
					{
						name: "回忆碎片",
						type: "equipment",
						num: 1,
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/b57607e025034c49bcf2cc465d5903fd.png",
						RarityLevel: 4,
					},
				],
				useBagThings: [],
				// 商店相关数据
				activeShopTabIndex: 0,
				activeShopTabType: "selectedRecommendations",
				shopTabList: [{
						name: "精选推荐",
						type: "selectedRecommendations",
					},
					{
						name: "月卡特权",
						type: "monthlyCard",
					},
					{
						name: "超值礼包",
						type: "giftPack",
					},
					{
						name: "充值兑换",
						type: "rechargeAndExchange",
					},
					{
						name: "特惠活动",
						type: "specialOffers",
					},
				],

				// 返回按钮数据
				backName: "",
				//
				activeMemberType: "girl",
				activeMemberTabIndex: 0,
				activeMemberIndex: -1,

				level: 1,
				url: "",
				jumpStoryId: "",
				memberTabList: [{
						type: "girl",
						icon: "",
						name: "舞姬",
					},
					{
						type: "map",
						icon: "",
						name: "图鉴",
					},
				],
				girlsList: [{
						name: "秘书·制服诱惑",
						start: 3,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/a3939145c28c46cb9805572571c8efd6.jpg",
						isEmpty: false,
						locked: false,
						storyId: "S025YAY",
						level: null,
						RarityLevel: 4,
					},
					{
						name: "米娜",
						storyId: "S018ICN",
						start: 3,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5c6ee974733046a795a0c0e7cc3af818.jpg",
						isEmpty: false,
						locked: false,
						level: null,
						RarityLevel: 4,
					},
					{
						name: "妙陈",
						storyId: "S020WKU",
						start: 3,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/2bbb616d72a9447aac0a9422078eca6d.jpg",
						isEmpty: false,
						locked: false,
						level: null,
						RarityLevel: 3,
					},
					{
						name: "秘书",
						start: 4,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/8d48c9e5c0fc4bb7a9d78d84400b079b.jpg",
						isEmpty: false,
						locked: true,
						storyId: "S025YAY",
						level: null,
						RarityLevel: 3,
					},
					{
						name: "米娜",
						storyId: "S018ICN",
						start: 3,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ca8d18090cac4ef9903e213f2d2d3402.jpg",
						isEmpty: false,
						locked: true,
						level: null,
						RarityLevel: 2,
					},
					{
						name: "妙陈",
						storyId: "S020WKU",
						start: 2,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/f6a9b4f1e3494982946b61698a4258f3.jpg",
						isEmpty: false,
						locked: true,
						level: null,
						RarityLevel: 2,
					},
					{
						name: "秘书",
						start: 3,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/14784ddce0aa47f6b44d09e769e371e3.jpg",
						isEmpty: false,
						locked: true,
						storyId: "S025YAY",
						level: null,
						RarityLevel: 2,
					},
					{
						name: "米娜",
						storyId: "S018ICN",
						start: 3,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/78add5080d4f4a229f87daa847caad2e.jpg",
						isEmpty: false,
						locked: true,
						level: null,
						RarityLevel: 2,
					},
					{
						name: "妙陈",
						storyId: "S020WKU",
						start: 3,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/2c2955b41ebf45e9ac2112f219cd7373.jpg",
						isEmpty: false,
						locked: true,
						level: null,
						RarityLevel: 1,
					},


				],
				goodsList: [{
						name: "钻石x3",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/6b716840e32048f5bdb7e550ad9bb056.png",
						isEmpty: false,
						price: 6.0,
					},
					{
						name: "钻石x10",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/50cd7c27cb0c4dcf82e09a546c8b8fd4.png",
						isEmpty: false,
						price: 18.8,
					},
					{
						name: "钻石x8",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/12882e22d9e543b09d3ae655c9d00a94.png",
						isEmpty: false,
						price: 8.8,
					},
					{
						name: "钻石x3",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/6b716840e32048f5bdb7e550ad9bb056.png",
						isEmpty: false,
						price: 9.0,
					},
					{
						name: "钻石x10",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/50cd7c27cb0c4dcf82e09a546c8b8fd4.png",
						isEmpty: false,
						price: 28.8,
					},
					{
						name: "钻石x8",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/12882e22d9e543b09d3ae655c9d00a94.png",
						isEmpty: false,
						price: 38.8,
					},
					{
						name: "钻石x3",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/6b716840e32048f5bdb7e550ad9bb056.png",
						isEmpty: false,
						price: 29.0,
					},
					{
						name: "钻石x3",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/6b716840e32048f5bdb7e550ad9bb056.png",
						isEmpty: true,
						price: 29.0,
					},
					{
						name: "钻石x3",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/6b716840e32048f5bdb7e550ad9bb056.png",
						isEmpty: true,
						price: 29.0,
					},
				],
			};
		},
		computed: {
			...mapState(["curStoryId"]),
			...mapGetters(["globalGameCtx"]),

		},
		watch: {
			curStoryId: {
				handler(newVal, oldVal) {
					if (this.storyId && this.storyId != newVal) {
						// this.handleCloseModal();
					}
				},
				deep: true,
				immediate: true,
			},
			type: {
				handler(newVal, oldVal) {
					if (newVal == "reward") {
						if (!this.rewardAudioContext) {
							this.initRewardAudio().then((res) => {
								this.rewardAudioContext.play();
							});
						} else {
							this.rewardAudioContext.stop()
							this.rewardAudioContext.play();
						}

						if (!this.eventData.notNeedAutoClose) {
							this.diceCloseTimeOutId = setTimeout(() => {
								if (this.show) {
									this.handleCloseModal();
								}
							}, 1300);
						}

					}
				},
				deep: true,
				immediate: true
			},
			"eventData.eventType": {
				handler(newVal, oldVal) {
					if (String(newVal).includes("default")) {
						this.handleStartRewardAutoGet();
					}
				},
				deep: true,
			},
			actTravelType: {
				handler(newVal, oldVal) {
					if (newVal == 'travel') {
						this.travelUseData = this.travelList
					} else if (newVal == 'dream') {
						this.travelUseData = this.travelDreamList
					} else if (newVal == 'fun') {
						this.travelUseData = this.travelFunList
					} else {
						this.travelUseData = this.miniGameList
					}
				},
				deep: true,
				immediate: true
			},

		},
		mounted() {


			// 测试
			// this.handleBagTabClick(0, this.bagTabs[0])
		},
		methods: {
			getStartList,
			handleReturnRarityLevelUrl,
			handleGirlDevelopModalClose() {
				this.isHideBack = false
			},
			// 事件相关方法
			initRewardAudio() {
				return new Promise((resolve, reject) => {
					this.rewardAudioContext = uni.createInnerAudioContext();
					this.rewardAudioContext.src =
						"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/audio/08eb8c31f7ea4a009f82ffc8ddbb953b.MP3";
					resolve(true);
				});
			},
			handleInterActiveGoTo() {
				let eventType = String(this.eventData.eventType);
				if (eventType.includes("event-interactive-dance")) {
					this.show = false;
					this.$emit("modelResult", {
						type: "pk",
					});
				} else if (eventType.includes("event-interactive-travel")) {
					this.type = "travel";
					let findTravel = this.travelList.find((item, index) => {
						return !item.traveling;
					});

					this.activeTravel = findTravel;
					this.showTravelModal = true;
				}
			},
			handleStartRewardAutoGet() {
				this.rewardAutoGetTimeOutId = setInterval(() => {
					if (this.rewardAutoWaitSeconds == 0) {
						this.handleCloseRewardAutoGet();
						// this.handleCloseModal()
						this.type = "reward";
					}
					this.rewardAutoWaitSeconds--;
				}, 1000);
			},
			handleCloseRewardAutoGet() {
				if (this.rewardAutoGetTimeOutId) {
					clearInterval(this.rewardAutoGetTimeOutId);
				}
				this.rewardAutoWaitSeconds = 3;
			},
			handleGetEventReward() {
				this.type = "reward";
				this.handleCloseRewardAutoGet();
			},
			handleEventModalClose() {
				// this.show = false
				let eventType = this.eventData.eventType;
				if (String(eventType).includes("event-default")) {
					this.handleGetEventReward();
				} else {
					// 之后事件会被收集
					this.handleCloseModal();
				}

				// switch (eventType) {
				// 	case 'reward':
				// 		// 暂时是
				// 		this.handleGetEventReward()
				// 		break;
				// 	default:
				// 		break;
				// }
			},
			// 游历相关方法
			isCrown(num) {
				if (num > 3) {
					return true
				} else {
					return false
				}
			},
			handleGetTravelFunList() {
				let gameId = this.globalGameCtx.gameId
				if (gameId) {
					getDanceList(gameId).then(res => {
						let arr = res.data.result
						this.travelFunList = arr.map((item, index) => {
							return {
								name: item.storyName,
								image: item.imageUrl,
								level: item.level,
								locked: item.locked,
								storyId: item.storyId,
								lastPlayTime: item.lastPlayTime,
								myScore: item.myScore,
								myStars: !item.myStars ? 0 : item.myStars,
								totalScore: item.totalScore
							}
						})
						if (this.actTravelType == 'fun') {
							this.travelUseData = this.travelFunList
						}
					})
				}
			},
			handlTravelTabItemClick(item, index) {
				this.actTravelTabIndex = index;
				this.actTravelType = item.type
			},
			handleStartTravel() {
				if (!this.tempActiveSecreter) {
					if (this.tipTimeOutId) {
						return
					}
					this.showTip = true
					this.tipText = "请邀请一名伙伴"
					this.tipTimeOutId = setTimeout(() => {
						this.showTip = false
						clearTimeout(this.tipTimeOutId)
						this.tipTimeOutId = null
					}, 1500)
				} else {
					this.tempActiveSecreter.traveling = true;
					this.activeTravel.traveling = true;
					this.activeTravel.actSecreter = {
						...this.tempActiveSecreter,
					};
				}

				// this.handleCloseTravelModal()
			},
			handleChooseSecreter() {
				if (!this.activeTravel.actSecreter) {
					this.showSecretaryChooseModal = true;
				}
			},
			handleConfirmSecreter() {
				this.handleCloseSecretaryChooseModal();
			},
			handleSecreteClick(item, index) {
				if (!item.traveling) {
					this.activeSecreterIndex = index;
					this.tempActiveSecreter = item;
				}
			},
			handleCloseSecretaryChooseModal() {
				this.showSecretaryChooseModal = false;
				this.activeSecreterIndex = -1;
			},
			handleTravelItemClick(item, index) {
				if (!item.locked && this.actTravelType == 'travel') {
					this.activeTravel = item;
					this.showTravelModal = true;
				} else if (!item.locked && (this.actTravelType == 'retreat' || this.actTravelType == 'dream' || this
						.actTravelType == 'fun')) {
					if (item.storyId) {
						this.$emit("modelResult", {
							type: 'travel',
							storyId: item.storyId
						})
					}

				}
			},
			handleCloseTravelModal() {
				this.activeTravel = null;
				this.tempActiveSecreter = null;
				this.showTravelModal = false;
			},

			// 用户相关方法
			handleUserSelectConstellation() {
				this.showConstellation = true;
				this.constellationIndex = this.constellationArr.indexOf(
					String(this.userInfo.constellation)
				);
			},
			handleChooseConstellation(e) {
				let index = e[0];
				this.constellationIndex = index;
				this.userInfo.constellation = this.constellationArr[index];
			},
			handleStartEditUserData() {
				this.isUserDataEdit = !this.isUserDataEdit;
			},
			handleChangeUserAvatarCancel() {
				this.userInfo = {
					...this.historyUserInfo,
				};
				this.activeAvatarBoderIndex = -1;
				this.activeAvatarIndex = -1;
				this.actUserAvatarType = "avatar";
				this.isChangeAvatar = false;
			},
			handleChangeUserAvatarConfirm() {
				this.historyUserInfo = {
					...this.userInfo,
				};
				this.activeAvatarBoderIndex = -1;
				this.activeAvatarIndex = -1;
				this.actUserAvatarType = "avatar";
				this.isChangeAvatar = false;
			},
			handleUserAvatarBoderClick(item, index) {
				this.activeAvatarBoderIndex = index;
				this.userInfo.avatarBorder = item.image;
			},
			handleUserAvatarClick(item, index) {
				this.activeAvatarIndex = index;
				this.userInfo.avatar = item.image;
			},
			handleAvatarChangeTypeClick(item, index) {
				this.actUserAvatarType = item.type;
			},
			handeUserChangeAvatar() {
				this.isChangeAvatar = true;
				this.historyUserInfo = {
					...this.userInfo,
				};
			},
			honerLevelFilter(value) {
				let resArr = this.honerLevelList.filter((item, index) => {
					return item.level == value;
				});
				return resArr.length ? resArr[0].image : "";
			},
			handleUserTabItemClick(item, index) {
				this.activeUserTabType = item.type;
			},
			sortIconSrc(index) {
				return this.sortIconList[index];
			},

			// 活动相关方法
			handlActiveTabItemClick(item, index) {
				this.actTabIndex = index;
			},
			handleActiveItemClick(index, item) {},
			handleActBottomTabClick(item, index) {
				this.actBtIndex = index;
			},
			// 背包相关方法
			handleBagTabClick(index, data) {
				this.activeBagTabIndex = index;
				try {
					if (data.type != "whole") {
						let typeThings = this.bagThings.filter((item, index) => {
							return item.type == data.type;
						});
						this.useBagThings = typeThings.concat(this.emptyBagThings);
					} else {
						this.useBagThings = this.bagThings.concat(this.emptyBagThings);
					}
				} catch (e) {
					//TODO handle the exception
					console.log("发生错误", e);
				}
			},
			// 商店相关方法
			handleShopTabItemClick(item, index) {
				this.activeShopTabIndex = index;
				this.activeShopTabType = item.type;
			},

			// 舞姬列表相关方法

			handleMemberItemClick(index, item) {
				if (item.locked) {
					return
				}
				this.activeMemberIndex = index;
				// this.$emit("modelResult", item.storyId)
				if (this.$refs.girlDevelopModal) {
					this.isHideBack = true
					this.$refs.girlDevelopModal.open(item);
				}
			},
			handleCloseModal() {
				this.show = false;
				this.isUserDataEdit = false;
				this.isChangeAvatar = false;
				this.activeUserTabType = "info";
				if (this.type == "event" || this.type == "reward") {
					this.$emit("close", this.eventData);
					if (this.type == "reward") {
						this.type = null
					}
				} else {
					this.$emit("close", this.type);
				}
				this.handleCloseRewardAutoGet();
				if (this.diceCloseTimeOutId) {
					clearTimeout(this.diceCloseTimeOutId);
					this.diceCloseTimeOutId = null;
				}
			},
			open(type, data) {
				this.show = true;
				this.type = type;
				this.eventData = {
					...data,
				};

				switch (type) {
					case "shop":
						// this.backName = '商店'
						// this.handleShopItemClick(0)
						this.backName = "";
						break;
					case "active":
						// this.backName = '精彩活动'
						this.backName = "";
						break;
					case "sort":
						// this.backName = '排名'
						this.backName = "";
						break;
					case "task":
						// this.backName = '日程'
						this.backName = "";
						break;
					case "team":
						// this.backName = '舞姬'
						this.backName = "";

						break;
					case "equip":
						// this.backName = '背包'
						this.backName = "";
						this.handleBagTabClick(0, this.bagTabs[0]);
						break;
					case "invite":
						// this.backName = '心动'
						this.backName = "";
						break;
					case "story":
						// this.backName = '公司'
						this.backName = "";
						break;

					case "user":
						// this.backName = '我的'

					case "travel":
						// this.backName = ''
						this.handleGetTravelFunList()
						break;

					case "reward":
						break;

					default:
						break;
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.pk-modal {
		pointer-events: fill;
		z-index: 999999999999999;
	}

	.content-box {
		position: relative;
		box-shadow: 0rpx 8rpx 40rpx -2rpx rgba(0, 0, 0, 0);
		border-radius: 12rpx;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.3);
		backdrop-filter: blur(15rpx);

		.event-box {
			z-index: 9;

			.event-modal-content {
				position: relative;
				width: calc(100% - 80rpx);
				height: auto;

				.event-auto-get-reward {
					position: absolute;
					left: 0rpx;
					bottom: -50rpx;
					width: 100%;
					height: 40rpx;
					text-align: center;
					font-size: 24rpx;
					line-height: 40rpx;
					color: #fff;
				}

				.event-intro {
					width: 100%;
				}

				.event-rewards {
					width: 100%;
				}

				.event-btns {
					width: 100%;
				}

				.event-meeting-intro {
					width: 100%;
					height: 300rpx;
					box-sizing: border-box;
					padding: 20rpx 20rpx;
					overflow: hidden;
					border-radius: 5rpx;
					padding-bottom: 0rpx;
				}

				.meeting-event-rewards {
					width: 100%;
				}

				.meeting-event-btns {
					width: 100%;
					margin-top: 150rpx;
				}
			}
		}

		.travel-box {
			z-index: 9;

			.top-box {
				width: 100%;
				height: 180rpx;
			}

			.travel-top-tab {
				width: 100%;
				box-sizing: border-box;
				padding: 0rpx 35rpx;
			}

			.travel-content {
				flex: 1;
				width: 750rpx;
				box-sizing: border-box;
				overflow: hidden;

				.travel-content-scroll {
					overflow: hidden;
				}

				//

				.travel-list {
					width: 100%;
					flex-wrap: wrap;
					box-sizing: border-box;
					padding: 20rpx 35rpx;

					.travel-item {
						position: relative;
						width: calc(50% - 5rpx);
						height: 480rpx;
						background-color: rgba(255, 255, 255, .9);
						border-radius: 8rpx;
						margin-bottom: 10rpx;
						overflow: hidden;
						box-shadow: 0rpx 0rpx 4rpx rgba(0, 0, 0, 0.3);

						.fun-level {
							position: absolute;
							left: 10rpx;
							top: 10rpx;
							font-size: 20rpx;
							line-height: 30rpx;
							padding: 0rpx 10rpx;
							border-radius: 5rpx;
							color: #fff;
							font-weight: 700;
							text-align: center;
							z-index: 3;
							letter-spacing: 2rpx;
						}

						.level-easy {
							background-color: #5ce64c;
						}

						.level-difficult {
							background-color: #fa64d4;
						}

						.level-crazy {
							background-color: #fc6f71;
						}

						.travel-item-bg {
							width: 100%;
							height: 420rpx;
						}

						.travel-time {
							position: absolute;
							left: 10rpx;
							top: 10rpx;
							// width: 200rpx;
							height: 30rpx;
							border-radius: 5rpx;
							background-color: rgba(0, 0, 0, 0.3);
							z-index: 3;
							box-sizing: border-box;
							padding: 0rpx 10rpx;
							color: #fff;

							.travel-tip {
								height: 30rpx;
								font-size: 18rpx;
								line-height: 30rpx;
								margin-right: 5rpx;
							}

							.travel-time-icon-img {
								width: 22rpx;
								height: 22rpx;
								vertical-align: middle;
								margin-right: 5rpx;
							}

							.travel-time-count-down {
								flex: 1;
								height: 30rpx;
							}
						}

						.travel-masker {
							position: absolute;
							left: 0rpx;
							top: 0rpx;
							width: 100%;
							height: 100%;
							background-color: rgba(0, 0, 0, 0.6);
							z-index: 4;

							.travel-masker-locked {
								width: 45rpx;
								height: 45rpx;
							}
						}

						.travel-item-bottom-info {
							flex: 1;
							width: 100%;
							// background-color: #fff;
							box-sizing: border-box;
							padding: 0rpx 10rpx;

							.level-name {
								font-size: 24rpx;
								line-height: 24rpx;
								color: #313131;
								font-weight: 700;
							}



							.travel-consume {
								.travel-consume-icon {
									width: 50rpx;
									height: 50rpx;
									margin-right: 10rpx;
								}

								.travel-consume-num {
									font-size: 22rpx;
									line-height: 22rpx;
									color: #c83220;
									font-weight: 700;
									text-shadow: 0rpx 0rpx 2rpx #f79fb2;
								}
							}


							.travel-fun-start {
								flex: 1;
								height: 100%;

								.fun-start-list {
									width: 100%;
									height: 100%;
								}

								.fun-start-item {
									width: 30rpx;
									height: 30rpx;
									margin-right: 5rpx;

									&:last-child {
										margin-right: 0rpx;
									}
								}
							}
						}
					}
				}
			}

			.bottom-box {
				width: 100%;
				height: 50rpx;
			}

			.travel-modal {
				z-index: 9;
				background-color: rgba(0, 0, 0, 0.8);
				backdrop-filter: blur(15rpx);

				.travel-modal-content {
					position: relative;
					width: calc(100% - 80rpx);
					height: 780rpx;
					box-sizing: border-box;

					.consume-box {
						justify-content: center;
					}

					.btn-box {
						margin-top: 5rpx;
					}

					.travel-close-icon {
						position: absolute;
						right: 20rpx;
						top: 50%;
						transform: translateY(-50%);
						width: 50rpx;
						height: 50rpx;
					}

					.travel-count-down-box {
						.travel-time-icon-img {
							width: 30rpx;
							height: 30rpx;
							margin-right: 5rpx;
						}
					}

					.travel-info {
						width: 100%;
						box-sizing: border-box;
						padding: 0rpx 40rpx;
						margin-top: 20rpx;

						.travel-picture {
							width: 225rpx;
							height: 340rpx;
							background-color: #fff;
							margin-right: 40rpx;
							border-radius: 5rpx;
							box-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, 0.1);
							overflow: hidden;

							.picture-img {
								width: 100%;
								// height: 220rpx;
								flex: 1;
							}

							.picture-name {
								// flex: 1;
								height: 40rpx;
								width: 100%;
								font-size: 20rpx;
								line-height: 20rpx;
								color: #313131;
								box-sizing: border-box;
								padding: 0rpx 10rpx;
							}
						}

						.travel-info-detail {
							flex: 1;
							// height: 260rpx;

							.travel-base-info {
								width: 100%;

								.title-box {
									margin-top: 0rpx;
									padding: 0rpx;
									margin-bottom: 10rpx;

									.consume-icon {
										width: 30rpx;
										height: 30rpx;
										margin-right: 5rpx;
									}

									.consume-num {
										font-size: 22rpx;
										line-height: 22rpx;
										// color: #c83220;
										// font-weight: 700;
										// text-shadow: 0rpx 0rpx 2rpx #f79fb2;
									}

									.left-tip {
										width: 130rpx;
									}

									.right-content {
										justify-content: flex-end;
										box-sizing: border-box;
										padding-right: 10rpx;
									}

									.favorability-num {
										color: #fff;
									}
								}
							}

							.travel-travelers {
								width: 100%;
								box-sizing: border-box;
								padding: 0rpx 20rpx;
								margin-top: 20rpx;

								.travel-member {
									width: 110rpx;

									.travel-avatar {
										width: 110rpx;
										height: 110rpx;
										border-radius: 50%;
										background-color: #fff;
										box-shadow: 0rpx 0rpx 4rpx rgba(255, 255, 255, 0.6);
										padding: 2rpx;

										.travel-avatar-img {
											border-radius: 50%;
										}
									}

									.travel-avatar-add {
										background-color: rgba(0, 0, 0, 0.05);

										.travel-avatar-img {
											width: 25%;
											height: 25%;
										}
									}

									.travel-name {
										width: 100%;
										height: 30rpx;
										font-size: 20rpx;
										line-height: 30rpx;
										color: #000;
										text-align: center;
										margin-top: 10rpx;
									}
								}
							}
						}
					}
				}
			}

			.choose-secretary-modal {
				background-color: rgba(0, 0, 0, 0.8);
				backdrop-filter: blur(15rpx);
				z-index: 11;

				.choose-secretary-modal-content {
					position: relative;
					width: calc(100% - 80rpx);
					height: 700rpx;
				}

				.secreter-choose-confirm {
					margin-top: 100rpx;
				}
			}
		}

		.dice-result-box {
			position: absolute;
			left: 0rpx;
			top: 0rpx;
			width: 100vw;
			height: 100vh;
			box-sizing: border-box;
			padding: 0 40rpx;
			z-index: 2;

			.dice-result-content {
				width: 100%;
				// position: absolute;
				// left: 0rpx;
				// top: 50%;
				// transform: translateY(-95%);
				animation: rewardShow 0.8s ease;

				padding-bottom: 200rpx;
			}

			.dice-result-tip-img {
				width: 100%;
				height: 80rpx;
				// margin-bottom: 20rpx;

				.dice-result-tip-img-content {
					width: 300rpx;
					height: 100%;
				}
			}

			.dice-result-tip {
				height: 80rpx;
				width: 100%;
				font-size: 50rpx;
				color: #f7eecb;
				text-align: center;
				text-shadow: 0rpx 0rpx 10rpx gold;
				letter-spacing: 5rpx;
				margin-bottom: 35rpx;
			}

			.dice-reward-list {
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 70rpx;
			}

			@keyframes rewardShow {
				0% {
					opacity: 0.1;
					transform: scale(0.1);
				}

				100% {
					opacity: 1;
					transform: scale(1);
				}
			}
		}

		.sort-box {
			position: absolute;
			left: 0rpx;
			top: 0rpx;
			width: 100vw;
			height: 100vh;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;

			.top-box {
				width: 100%;
				height: 170rpx;
			}

			.sort-top {
				width: 100%;
				height: 440rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.top-three-item {
					position: relative;
					flex: 1;
					height: 100%;

					.info-box {
						position: absolute;
						left: 50%;
						bottom: 30rpx;
						width: 100%;
						transform: translateX(-50%);
						display: flex;
						flex-direction: column;
						justify-content: flex-start;
						align-items: center;

						.top-avatar-box {
							position: relative;
							width: 130rpx;
							height: 130rpx;
							border-radius: 50%;
							background-color: transparent;
							box-sizing: border-box;
							border: 4rpx solid #fff;
							display: flex;
							justify-content: center;
							align-items: center;

							.avatar-img {
								width: 110rpx;
								height: 110rpx;
								border-radius: 50%;
								animation: avatarBreath 1s linear infinite;
							}

							@keyframes avatarBreath {
								0% {
									transform: scale(0.95);
								}

								50% {
									transform: scale(1);
								}

								100% {
									transform: scale(0.95);
								}
							}

							.top-sort-number {
								position: absolute;
								left: 50%;
								transform: translateX(-50%);
								top: -28rpx;
								width: 50rpx;
								height: 50rpx;
								color: #ffff;
								font-size: 30rpx;
								line-height: 50rpx;
								display: flex;
								justify-content: center;
								align-items: center;
								background-color: rgba(251, 220, 104, 0.8);
								border-radius: 50%;
								font-weight: 700;

								.crown {
									position: absolute;
									top: -30rpx;
									width: 35rpx;
									height: 35rpx;
								}
							}
						}

						.user-name,
						.sort-by {
							font-size: 20rpx;
							color: #fff;
							line-height: 30rpx;
							width: 100%;
							text-align: center;
							font-weight: 700;
							text-shadow: 1rpx 1rpx 1rpx rgba(0, 0, 0, 0.3);
						}

						.user-name {
							margin-top: 5rpx;
						}
					}
				}

				.two {
					.info-box {
						.top-avatar-box {
							box-shadow: 0rpx 0rpx 10rpx #a6b9fd;
							border-color: #bc82db;

							.top-sort-number {
								background-color: rgba(178, 117, 240, 0.8);
							}
						}

						.number {
							color: #bc82db;
						}
					}
				}

				.one {
					.info-box {
						bottom: 55rpx;

						.top-avatar-box {
							box-shadow: 0rpx 0rpx 10rpx #f3e4b1;
							border-color: #fdde69;
						}

						.number {
							color: #fdde69;
						}
					}
				}

				.three {
					.info-box {
						.top-avatar-box {
							box-shadow: 0rpx 0rpx 10rpx #76a3f8;
							border-color: #76a3f8;

							.top-sort-number {
								background-color: rgba(118, 162, 251, 0.8);
							}
						}

						.number {
							color: #76a3f8;
						}
					}
				}
			}

			.sort-center {
				flex: 1;
				width: 100%;
				background-color: transparent;
				box-sizing: border-box;
				padding: 0rpx 35rpx;
				overflow: hidden;

				.content {
					position: relative;
					width: 100%;
					height: 100%;
					border-radius: 5rpx;
					box-sizing: border-box;
					overflow: hidden;
					padding-top: 52rpx;
					padding-bottom: 88rpx;

					.top-sort-type {
						position: absolute;
						left: 0rpx;
						top: 1rpx;
						width: 100%;
						height: 50rpx;
						z-index: 999;
						box-sizing: border-box;
						padding: 0 5rpx;

						.top-sort-content {
							position: relative;
							width: 100%;
							height: 100%;
							display: flex;
							justify-content: flex-start;
							font-size: 24rpx;
							font-weight: 700;
							color: #fff;

							.bottom-line {
								position: absolute;
								left: 0rpx;
								bottom: 0rpx;
								width: 100%;
								height: 2rpx;
								background-color: rgba(255, 255, 255, 0.8);
								opacity: 0.3;
							}
						}

						.sortNumber {
							position: relative;
							width: 120rpx;
							height: 100%;
						}

						.avatar-userName {
							position: relative;
							width: 360rpx;
							height: 100%;

							.userName {
								flex: 1;
								height: 100%;
								font-size: 20rpx;
								line-height: 20rpx;
								color: #fff;
								display: flex;
								justify-content: flex-start;
								align-items: center;
							}
						}

						.userName {
							position: relative;
							flex: 1;
							height: 100%;
						}

						.sourceNumber {
							position: relative;
							flex: 1;
							height: 100%;
						}

						.center-flex {
							display: flex;
							justify-content: center;
							align-items: center;
						}

						.line-icon {
							position: absolute;
							top: 50%;
							transform: translateY(-50%);
							right: 0rpx;

							width: 1rpx;
							height: 30rpx;
							background-color: rgba(255, 255, 255, 0.5);
							opacity: 0.2;
						}
					}

					.sortScrollContent {
						width: 100%;
						height: 100%;
						border-radius: 5rpx;
						border-bottom-left-radius: 0;
						border-bottom-right-radius: 0;
						overflow: hidden;
					}

					.sort-list {
						width: 100%;
						box-sizing: border-box;
						padding-bottom: 10rpx;
					}

					.sort-item {
						width: 100%;
						height: 88rpx;
						border-radius: 5rpx;
						margin-bottom: 10rpx;
						box-sizing: border-box;
						padding: 0 5rpx;

						&:first-child {
							margin-top: 10rpx;
						}

						&:last-child {
							margin-bottom: 0;
						}

						.sort-item-content {
							width: 100%;
							height: 100%;
							color: #fff;
							display: flex;
							justify-content: flex-start;
							align-items: center;
							box-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, 0.6);
							background-color: rgba(255, 255, 255, 0.7);
							border-radius: 3rpx;
							color: #514f50;
							// border: 1rpx solid rgba(0, 0, 0, .8);

							.top-three-icon {
								width: 80rpx;
								height: 80rpx;

								.sort-icon {
									width: 100%;
									height: 100%;
								}
							}
						}

						.sortNumber {
							width: 120rpx;
							// flex: 1;
							height: 100%;
							font-size: 28rpx;
							font-weight: 700;
							// background-color: pink;
						}

						.avatar-userName {
							width: 360rpx;
							// flex: 1;
							height: 100%;
							display: flex;
							justify-content: flex-start;
							align-items: center;

							.sort-userName {
								font-size: 18rpx;
								line-height: 18rpx;
								// color: #fff;
								display: flex;
								flex-direction: column;
								justify-content: flex-start;
								align-items: center;

								.top-userName {
									width: 100%;
									display: flex;
									justify-content: flex-start;
									align-items: center;

									.userName-text {
										// margin-right: 5rpx;
										width: 125rpx;
										overflow: hidden;
										text-overflow: ellipsis;
										white-space: nowrap;
										font-weight: 700;
									}

									.honer-text {
										font-size: 14rpx;
										line-height: 24rpx;
										background-color: #a690ff;
										color: #fff;
										padding: 0rpx 5rpx;
										border-radius: 5rpx;
										margin-right: 8rpx;
									}

									.bottom-honer-img {
										width: 100rpx;
										height: 30rpx;
									}
								}

								.bottom-honer {
									width: 100%;
									display: flex;
									justify-content: flex-start;
									align-items: center;
									margin-top: 5rpx;

									.honer-text {
										font-size: 14rpx;
										line-height: 24rpx;
										background-color: #a690ff;
										color: #fff;
										padding: 0rpx 5rpx;
										border-radius: 5rpx;
										margin-right: 10rpx;
									}

									.bottom-honer-img {
										width: 100rpx;
										height: 30rpx;
									}
								}
							}

							.avatar-img {
								width: 70rpx;
								height: 70rpx;
								// background-color: #fff;
								border-radius: 50%;
								box-shadow: 0rpx 0rpx 1rpx rgba(0, 0, 0, 0.6);
								margin-left: 20rpx;
								margin-right: 20rpx;
							}
						}

						.userName {
							// background-color: skyblue;
							// width: 150rpx;
							flex: 1;
							height: 100%;
							font-size: 20rpx;
						}

						.sourceNumber {
							// background-color: peachpuff;
							flex: 1;
							height: 100%;
							font-size: 20rpx;
							// color: #f8efe0;
							// color: #deac54;
						}

						.center-flex {
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}

					.bottom-my-sort-item {
						position: absolute;
						left: 0rpx;
						bottom: 0rpx;
						width: 100%;
						height: 88rpx;
						z-index: 999;
						box-sizing: border-box;
						padding: 0 5rpx;
						margin-bottom: 0rpx;
					}
				}
			}

			.sort-bottom {
				width: 100%;
				height: 150rpx;

				.sort-bottom-tab {
					position: relative;
					width: 100vw;
					height: 80rpx;
					box-sizing: border-box;
					padding-top: 20rpx;
					// background-color: pink;

					.tab-scroll-content {
						position: relative;
						width: 100vw;
						box-sizing: border-box;
						padding: 0 35rpx;
						overflow: hidden;
					}

					.tab-bottom-line {
						position: absolute;
						left: 0rpx;
						bottom: 6rpx;
						width: 100%;
						height: 2rpx;
						opacity: 0.2;
						box-sizing: border-box;
						padding: 0rpx 10rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						z-index: 9;

						.line-center {
							width: 100%;
							height: 100%;
							background-image: linear-gradient(to right,
									rgba(255, 255, 255, 0) 0%,
									rgba(255, 255, 255, 0.8) 15%,
									rgba(255, 255, 255, 0.8) 85%,
									rgba(255, 255, 255, 0) 100%);
						}
					}

					.bag-tab-item {
						// flex: 1;
						width: 122rpx;
						// height: 80rpx;
						height: 40rpx;
						display: inline-block;
						text-align: center;
						// flex-direction: column;
						// justify-content: center;
						// align-items: center;
						// background-image: linear-gradient(to right bottom, #f7f7f9 10%, #cacddc 60%, #f7f7f9 90%);
						// color: #646369;
						color: #fff;
						background-color: rgba(59, 61, 84, 0.1);
						margin-right: 20rpx;
						// border-bottom-left-radius: 10rpx;
						// border-bottom-right-radius: 10rpx;
						border-radius: 2rpx;
						overflow: hidden;
						box-shadow: 0 0 2rpx rgba(255, 255, 255, 1);
						margin-top: 5rpx;
						margin-bottom: 5rpx;

						.top-tabName {
							font-size: 22rpx;
							line-height: 40rpx;
							// font-weight: 700;
						}

						.bottom-tabType {
							font-size: 18rpx;
						}

						&:last-child {
							margin-right: 5rpx;
						}

						&:first-child {
							margin-left: 5rpx;
						}
					}

					.bag-active-tabItem {
						// background-color: #fff;
						// color: #2d2d2d;

						// background-color: #fadd8c;
						// box-shadow: 0 0 10rpx #fadd8c;
						// color: #572c0d;

						// background-image: linear-gradient(to right, #fef9d9, #f3f1c6);
						// color: #b27439;
						background-color: #f8efe0;
						// color: #b27439;
						color: #572c0d;
						animation: bagTabScale 0.2s linear;
					}

					@keyframes bagTabScale {
						0% {
							transform: scale(1);
						}

						50% {
							transform: scale(1.1);
						}

						100% {
							transform: scale(1);
						}
					}
				}

				.switch {
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-top: 30rpx;

					.switch-left-last,
					.switch-left-next {
						width: 50rpx;
						height: 50rpx;

						.image-icon {
							width: 100%;
							height: 100%;
						}
					}

					.switch-center-nowtype {
						width: 500rpx;
						height: 50rpx;
						text-align: center;
						font-size: 30rpx;
						line-height: 50rpx;
						font-weight: 700;
						color: #fff;
						text-shadow: rgba(0, 0, 0, 0.6);
					}
				}
			}
		}

		.active-box {
			position: absolute;
			left: 0rpx;
			top: 0rpx;
			width: 100vw;
			height: 100vh;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;

			.top-box {
				width: 100vw;
				height: 170rpx;
			}

			.center-active-scroll {
				flex: 1;
				width: 100vw;
				// background-color: #fff;
				overflow: hidden;

				.active-scroll-content {
					width: 100%;
					height: 100%;

					// overflow: hidden;
					.active-list {
						width: 100%;
						display: flex;
						flex-direction: row;
						justify-content: center;
						flex-wrap: wrap;
						box-sizing: border-box;
						padding: 0rpx 35rpx;

						.active-item-content {
							position: relative;
							width: 100%;
							height: 220rpx;
							margin-bottom: 30rpx;
							box-sizing: border-box;
							overflow: hidden;
							box-shadow: 0rpx 0rpx 2rpx rgba(255, 255, 255, 0.6);

							.active-image {
								width: 100%;
								height: 100%;
								object-fit: cover;
							}
						}
					}
				}
			}
		}

		.active-box {
			.top-box {
				height: 180rpx;
			}

			.active-tab-box {
				// height: 300rpx;
				width: 100%;
				margin-bottom: 30rpx;
				box-sizing: border-box;
				padding: 0rpx 35rpx;
			}
		}

		.bag-box,
		.task-box {
			position: absolute;
			left: 0rpx;
			top: 0rpx;
			width: 100vw;
			height: 100vh;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;

			// background-color: #f9f9fb;
			.top-box {
				width: 100vw;
				height: 170rpx;
			}

			.center-bag-scroll {
				flex: 1;
				width: 100vw;
				overflow: hidden;

				.bag-scroll-content {
					width: 100%;
					height: 100%;

					// overflow: hidden;
					.bag-thing-list {
						width: 100%;
						// padding: 20rpx 0rpx;
						display: flex;
						justify-content: center;

						.thing-content {
							width: 100%;
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							flex-wrap: wrap;
							box-sizing: border-box;
							padding: 0rpx 35rpx;
						}

						.thing-item {
							position: relative;
							width: 135rpx;
							height: 135rpx;
							margin-right: 35rpx;
							margin-bottom: 30rpx;
							box-sizing: border-box;
							overflow: hidden;
							background-color: rgba(255, 255, 255, 0.3);
							box-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, 0.1);

							&::after {
								position: absolute;
								left: 0rpx;
								bottom: 0rpx;
								content: "";
								width: 100%;
								height: 2rpx;
								z-index: 9;
							}

							&::before {
								content: "";
								position: absolute;
								left: 0rpx;
								bottom: 0rpx;
								width: 100%;
								height: 100%;
								z-index: 2;
							}

							.thing-num {
								position: absolute;
								right: 0rpx;
								bottom: 4rpx;
								display: inline-block;
								padding: 0 8rpx;
								font-size: 16rpx;
								color: #fff;
								background-color: rgba(0, 0, 0, 0.3);
								line-height: 20rpx;
							}

							&:nth-child(4n) {
								margin-right: 0;
							}

							.thing-icon {
								width: 100%;
								height: 100%;
								object-fit: cover;
							}
						}

						.empty-thing {
							opacity: 0;
						}
					}
				}
			}

			.bag-bottom-tab {
				position: relative;
				width: 100vw;
				// height: 80rpx;
				box-sizing: border-box;
				padding-top: 20rpx;
				// background-color: pink;

				.tab-scroll-content {
					position: relative;
					width: 100vw;
					box-sizing: border-box;
					padding: 0 35rpx;
					overflow: hidden;
					height: 40rpx;
				}

				.tab-bottom-line {
					position: absolute;
					left: 0rpx;
					bottom: -2rpx;
					width: 100%;
					height: 2rpx;
					opacity: 0.2;
					box-sizing: border-box;
					padding: 0rpx 35rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					z-index: 9;

					.line-center {
						width: 100%;
						height: 100%;
						// background-image: linear-gradient(to right, rgba(255, 255, 255, 0)0%, rgba(255, 255, 255, .8)15%, rgba(255, 255, 255, .8)85%, rgba(255, 255, 255, 0)100%);
						background-color: rgba(255, 255, 255, 0.8);
						opacity: 0.6;
					}
				}

				.bag-tab-item {
					// flex: 1;
					width: 150rpx;
					// height: 80rpx;
					height: 40rpx;
					display: inline-block;
					text-align: center;
					font-weight: 700;
					// flex-direction: column;
					// justify-content: center;
					// align-items: center;
					// background-image: linear-gradient(to right bottom, #f7f7f9 10%, #cacddc 60%, #f7f7f9 90%);
					// color: #646369;
					color: #fff;
					// background-color: rgba(59, 61, 84, .1);
					// margin-right: 20rpx;
					// border-bottom-left-radius: 10rpx;
					// border-bottom-right-radius: 10rpx;
					border-radius: 2rpx;
					overflow: hidden;
					// box-shadow: 0 0 2rpx rgba(255, 255, 255, 1);
					// margin-top: 5rpx;
					// margin-bottom: 5rpx;

					.top-tabName {
						font-size: 24rpx;
						line-height: 40rpx;
						// font-weight: 700;
					}

					.bottom-tabType {
						font-size: 18rpx;
					}

					&:last-child {
						// margin-right: 5rpx;
					}

					&:first-child {
						// margin-left: 5rpx;
					}
				}

				.bag-active-tabItem {
					// background-color: #fff;
					// color: #2d2d2d;

					// background-color: #fadd8c;
					// box-shadow: 0 0 10rpx #fadd8c;
					// color: #572c0d;

					// background-image: linear-gradient(to right, #fef9d9, #f3f1c6);
					background-color: #f0eeef;
					// color: #b27439;
					color: #000;
					animation: bagTabScale 0.2s linear;
				}

				@keyframes bagTabScale {
					0% {
						transform: scale(1);
					}

					50% {
						transform: scale(1.1);
					}

					100% {
						transform: scale(1);
					}
				}
			}
		}

		.bag-box {
			.bag-bottom-tab {
				margin-bottom: 30rpx;
				// margin-top: 20rpx;

				.bag-tab-item {
					// margin-bottom: 5rpx;
				}
			}
		}

		.task-box {
			.task-progress {
				width: 100%;
				height: 160rpx;
				// background-color: pink;
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;
				box-sizing: border-box;
				padding: 0rpx 35rpx;
				margin-top: 20rpx;

				.left-big-icon {
					width: 120rpx;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					// background-color: pink;
					margin-right: 20rpx;
					// margin-left: 20rpx;

					.big-icon-content {
						width: 120rpx;
						height: 120rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;

						border-radius: 50%;
						box-shadow: inset 0rpx 0rpx 20rpx rgba(255, 255, 255, 0.6);
					}

					.big-top-icon {
						width: 60rpx;
						height: 60rpx;

						.big-top-icon-img {
							width: 100%;
							height: 100%;
						}
					}

					.big-bottom-point {
						width: 100%;

						font-size: 24rpx;
						line-height: 24rpx;
						color: #fff;
						text-align: center;
						// margin-top: 20rpx;
					}
				}

				.right-progress-content {
					flex: 1;
					height: 100%;
					display: flex;
					justify-content: flex-start;
					align-items: center;

					.progress-content-inner {
						width: 500rpx;
						height: 100%;

						display: flex;
						flex-direction: column;
						justify-content: flex-start;
						align-items: center;

						.top-icon-box {
							width: 100%;
							height: 90rpx;
							// background-color: pink;
							display: flex;
							justify-content: flex-start;
							align-items: center;

							.icon-box-item {
								position: relative;
								flex: 1;
								height: 100%;

								.scale-img {
									position: absolute;
									right: 0rpx;
									bottom: 20rpx;
									width: 60rpx;
									height: 60rpx;
									// background-color: pink;
									transform: translateX(50%);
									display: flex;
									justify-content: center;
									align-items: flex-end;

									.img-content {
										position: absolute;
										left: 50%;
										// top: 50%;
										bottom: 0rpx;
										transform: translateX(-50%);
										width: 35rpx;
										height: 35rpx;
									}

									.img-enough {
										width: 25rpx;
										height: 25rpx;
									}

									.bg-box {
										width: 35rpx;
										height: 35rpx;
										background-color: rgba(0, 0, 0, 0.1);
										box-shadow: 0rpx 0rpx 1rpx #fff;
										transform: rotate(45deg);
									}
								}

								.scale-icon {
									position: absolute;
									right: 0;
									bottom: 0rpx;
									// width: 10rpx;
									// height: 10rpx;
									// background-color: #fff;
									width: 0rpx;
									height: 0rpx;
									border: 8rpx solid transparent;
									border-top-color: #fff;

									transform: translateX(50%);
								}
							}
						}

						.center-progress-box {
							position: relative;
							width: 100%;
							height: 8rpx;
							background-color: rgba(0, 0, 0, 0.3);
							box-shadow: 0rpx 0rpx 2rpx #fff;

							.progeress-inner {
								position: absolute;
								left: 0rpx;
								top: 0rpx;
								width: 20%;
								height: 100%;
								background-color: #f2b975;
							}
						}

						.bottom-point-box {
							flex: 1;
							width: 100%;
							display: flex;
							justify-content: flex-start;
							align-items: center;

							.point-item {
								position: relative;
								flex: 1;
								height: 100%;

								.scale-num {
									position: absolute;
									right: 0rpx;
									top: 20rpx;
									transform: translate(50%);
									font-size: 24rpx;
									line-height: 20rpx;
									color: #fff;
								}
							}
						}
					}
				}
			}

			.center-task-scroll {
				flex: 1;
				width: 100vw;
				// background-color: #fff;
				overflow: hidden;
				// margin-bottom: 20rpx;

				.task-scroll-content {
					width: 100%;
					height: 100%;

					.task-list {
						width: 100%;
						display: flex;
						flex-direction: column;
						// justify-content: center;
						box-sizing: border-box;
						padding: 0rpx 35rpx;

						.task-item {
							width: 100%;
							height: 140rpx;
							margin-bottom: 20rpx;
							border-radius: 5rpx;
							box-shadow: 0rpx 0rpx 2rpx #fff;
							// background-image: linear-gradient(to right, #edf8fe, #f8f0f9);
							box-sizing: border-box;
							background-color: rgba(0, 0, 0, 0.3);

							&:first-child {
								margin-top: 20rpx;
							}

							padding-top: 10rpx;

							display: flex;
							flex-direction: column;
							justify-content: flex-start;

							// .task-icon {
							// 	width: 120rpx;
							// 	height: 120rpx;
							// 	// background-color: #fff;
							// 	background-image: linear-gradient(to bottom right, rgba(198, 192, 185, .4), rgba(198, 192, 185, .6));
							// 	// box-shadow: 0rpx 0rpx 2rpx #fff;
							// 	display: flex;
							// 	justify-content: center;
							// 	align-items: center;

							// 	.task-icon-image {
							// 		width: 100rpx;
							// 		height: 100rpx;
							// 	}
							// }

							// .task-intro {
							// 	flex: 1;
							// 	height: 100%;

							// }

							// .task-button {
							// 	width: 200rpx;
							// 	height: 100%;
							// 	background-color: pink;
							// }

							.top-info {
								width: 100%;
								height: 40rpx;
								display: flex;
								justify-content: space-between;
								align-items: center;
								// font-weight: 700;
								box-sizing: border-box;
								padding: 0rpx 35rpx;

								.left-title {
									display: flex;
									justify-content: flex-start;
									align-items: center;
									height: 100%;

									// .title-icon {
									// 	width: 5rpx;
									// 	height: 30rpx;
									// 	background-color: #464950;
									// 	margin-right: 10rpx;

									// }

									.title-text {
										font-size: 20rpx;
										line-height: 40rpx;
										color: #fff;
									}
								}

								.right-progress {
									height: 100%;
									color: #fff;
									font-size: 20rpx;
									line-height: 40rpx;

									.progress-tip {
										color: rgba(255, 255, 255, 0.6);
									}
								}
							}

							.center-line {
								width: 650rpx;
								height: 1rpx;
								// background-color: #fff;
								background-image: linear-gradient(to right,
										rgba(255, 255, 255, 0.8),
										rgba(255, 255, 255, 0));
								opacity: 0.1;
								margin-left: 20rpx;
							}

							.botom-content {
								flex: 1;
								width: 100%;
								display: flex;
								justify-content: space-between;
								align-items: center;
								padding: 0rpx 35rpx;

								.left-reward {
									flex: 1;
									position: relative;
									height: 65rpx;
									display: flex;
									justify-content: flex-start;
									align-items: center;

									.reward-item {
										position: relative;
										width: 65rpx;
										height: 65rpx;
										border-radius: 8rpx 0rpx 8rpx 0rpx;
										overflow: hidden;
										box-sizing: border-box;
										// border: 2rpx solid #acc1dd;
										border: 2rpx solid #c7c2bb;
										background-color: #fff;
										margin-right: 10rpx;
										display: flex;
										justify-content: center;
										align-items: center;
									}

									.reward-icon {
										position: absolute;
										left: 50%;
										top: 50%;
										transform: translate(-50%, -50%);
										width: 90%;
										height: 90%;
										z-index: 1;
										border-radius: 10rpx 0rpx 10rpx 0rpx;
									}

									.reward-num {
										position: absolute;
										right: 0rpx;
										bottom: 0rpx;
										display: inline-block;
										padding: 0 5rpx;
										font-size: 12rpx;
										color: #fff;
										background-color: rgba(0, 0, 0, 0.3);
										line-height: 16rpx;
										z-index: 2;
									}
								}

								.right-button {
									width: 120rpx;
									height: 100%;
									display: flex;
									flex-direction: column;
									justify-content: center;
									align-items: center;

									.top-percent {
										position: relative;
										width: 100%;
										height: 10rpx;
										background-color: #9da4a5;
										border-radius: 10rpx;
										overflow: hidden;

										.percent-content {
											height: 100%;
											background-color: #fdd057;
											border-radius: 10rpx;
										}
									}

									.bottom-button,
									.task-bottom-tip {
										width: 100%;
										height: 40rpx;
										display: flex;
										justify-content: center;
										align-items: center;
										// background-image: linear-gradient(to right, #f3f1c6, #efcf80);
										// color: #b27439;
										background-color: #f8efe0;
										color: #715a52;
										font-size: 20rpx;
										margin-top: 10rpx;
										font-weight: 700;
										border-radius: 5rpx;
										line-height: 40rpx;
									}

									.task-bottom-tip {
										justify-content: flex-end;
										background: none;
										color: rgba(255, 255, 255, 0.6);
									}
								}
							}
						}
					}
				}
			}

			.bottom-get-all-reward {
				width: 100%;
				height: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.get-all-btn {
					background-color: #f8efe0;
					color: #715a52;
					font-size: 24rpx;
					border-radius: 5rpx;
					font-weight: 700;
					width: 200rpx;
					height: 60rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					line-height: 60rpx;
				}
			}

			.bag-bottom-tab {
				.bag-tab-item {
					width: 180rpx;
				}
			}
		}

		.user-box {
			position: absolute;
			left: 0rpx;
			top: 0rpx;
			width: 100vw;
			height: 100vh;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;

			.top-box {
				width: 100%;
				height: 170rpx;
			}

			.center-content {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				width: 650rpx;
				height: 850rpx;
				// background-color: rgba(255, 255, 255, .6);
				border-radius: 10rpx;
				box-sizing: border-box;
				padding: 6rpx;
				background-color: rgba(255, 255, 255, 0);
				backdrop-filter: blur(15rpx);
				box-shadow: inset 0rpx 0rpx 2rpx rgba(255, 255, 255, 0.8);

				.content-box {
					width: 100%;
					height: 100%;
					background-color: rgba(255, 255, 255, 0.8);
					border-radius: 10rpx;
					box-shadow: 0rpx 0rpx 8rpx rgba(255, 255, 255, 0.8);
					overflow: hidden;

					box-sizing: border-box;

					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: center;

					.top-title {
						position: relative;
						width: 100%;
						height: 60rpx;
						text-align: center;
						font-size: 30rpx;
						color: #5e5c5d;
						box-sizing: border-box;
						padding: 0rpx 35rpx;
						letter-spacing: 2rpx;
						line-height: 60rpx;

						.bottom-line {
							position: absolute;
							left: 0rpx;
							bottom: 0rpx;
							width: 100%;
							height: 2rpx;
							box-sizing: border-box;
							padding: 0rpx 35rpx;

							.line-content {
								width: 100%;
								height: 100%;
								background-color: rgba(0, 0, 0, 0.3);
								opacity: 0.4;
							}
						}

						.m-close-icon {
							position: absolute;
							right: 20rpx;
							top: 50%;
							transform: translateY(-50%);
							width: 50rpx;
							height: 50rpx;

							.m-close-icon-img {
								width: 100%;
								height: 100%;
							}
						}
					}

					.user-info-box,
					.setting-box,
					.data-box {
						width: 100%;
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: flex-start;
						align-items: center;
						overflow: hidden;

						.change-icon {
							width: 30rpx;
							height: 30rpx;
						}

						.user-self-data {
							width: 100%;
							box-sizing: border-box;
							padding: 0rpx 60rpx;
							display: flex;
							justify-content: flex-start;
							flex-wrap: wrap;

							.data-item {
								width: 50%;
								display: flex;
								justify-content: flex-start;
								align-items: center;
								margin-bottom: 15rpx;

								.data-label {
									height: 30rpx;
									font-size: 20rpx;
									line-height: 30rpx;
									color: #87847f;
									margin-right: 10rpx;
									display: flex;
									justify-content: flex-start;
									align-items: center;
								}

								.data-content {
									width: 150rpx;
									// height: 30rpx;
									font-size: 20rpx;
									line-height: 30rpx;
									color: #000;
									text-align: left;

									// background-color: rgba(255, 255, 255, .3);
									.data-content-input {
										width: 100%;
										height: 45rpx;
										outline: none;
										border: none;
										background-color: rgba(255, 255, 255, 0.3);
										display: flex;
										justify-content: flex-start;
										align-items: center;
										box-sizing: border-box;
										padding: 0rpx 10rpx;
									}
								}

								.not-edit {
									width: auto;
								}
							}

							.right-item {
								justify-content: flex-end;
							}
						}

						.signature-box {
							width: 100%;
							height: 150rpx;
							box-sizing: border-box;
							padding: 0rpx 60rpx;

							.signature-box-area {
								font-size: 20rpx;
								line-height: 30rpx;
								width: 100%;
								height: 100%;
								box-sizing: border-box;
								padding: 10rpx;
								background-color: rgba(255, 255, 255, 0.3);
							}
						}
					}

					.user-game-info {
						width: 100%;
						display: flex;
						justify-content: flex-start;
						align-items: center;
						padding: 20rpx;

						.user-avatar {
							position: relative;
							width: 130rpx;
							height: 130rpx;
							margin-right: 20rpx;
							// padding: 5rpx;
							// overflow: hidden;
							display: flex;
							justify-content: center;
							align-items: center;
							box-sizing: border-box;
							border: 2rpx solid #fff;
							box-shadow: 0rpx 0rpx 6rpx rgba(0, 0, 0, 0.6);
							border-radius: 50%;

							.user-avatar-img {
								width: 100%;
								height: 100%;
								border-radius: 50%;
							}

							.user-avatar-boder {
								position: absolute;
								left: 50%;
								top: 50%;
								transform: translate(-50%, -50%);
								width: 130%;
								height: 130%;
								border-radius: 50%;
								z-index: 9;
							}
						}

						.user-other-info {
							position: relative;
							flex: 1;
							height: 130rpx;
							display: flex;
							flex-direction: column;
							justify-content: flex-start;
							align-items: center;

							.user-nickName {
								position: relative;
								flex: 1;
								display: flex;
								width: 100%;
								justify-content: flex-start;
								align-items: center;
								font-size: 24rpx;
								line-height: 24rpx;
								color: #202020;
								box-sizing: border-box;
								padding-left: 5rpx;
								padding-right: 30rpx;

								.change-name {
									position: absolute;
									right: 5rpx;
									top: 50%;
									transform: translateY(-50%);
									width: 30rpx;
									height: 30rpx;
								}
							}

							.user-level-exp {
								flex: 1;
								width: 100%;
								display: flex;
								justify-content: space-between;
								align-items: center;
								color: #202020;

								.user-level {
									font-size: 20rpx;
									line-height: 36rpx;
									background-color: #a690ff;
									color: #fff;
									padding: 0rpx 35rpx;
									border-radius: 5rpx;
								}

								.user-exp {
									display: flex;
									justify-content: flex-end;
									align-items: center;

									.user-exp-icon {
										font-size: 18rpx;
										line-height: 24rpx;
										padding: 0rpx 10rpx;
										color: #fff;
										background-color: #60c184;
										margin-right: 10rpx;
										border-radius: 5rpx;
									}

									.exp-num {
										display: flex;
										justify-content: flex-start;
										align-items: center;
									}

									.exp-num-now {
										font-size: 20rpx;
										line-height: 20rpx;
										color: #202020;
									}

									.exp-num-need {
										font-size: 18rpx;
										line-height: 18rpx;
										color: #9d9ea0;
									}
								}
							}

							.line-box {
								position: absolute;
								left: 0rpx;
								top: 50%;
								transform: translateY(-50%);
								width: 100%;
								height: 1rpx;
								background-color: rgba(0, 0, 0, 0.3);
								// background-image: linear-gradient(to right, rgba(0, 0, 0, .6)0%, rgba(0, 0, 0, .4)40%, rgba(0, 0, 0, .2)80%, rgba(0, 0, 0, 0)100%);
								opacity: 0.3;

								.point-box {
									position: absolute;
									right: 0rpx;
									top: 50%;
									transform: translateY(-50%);
									width: 4rpx;
									height: 4rpx;
									border-radius: 50%;
									background-color: rgba(0, 0, 0, 0.3);
								}
							}
						}
					}

					.honor-box {
						width: 100%;
						// height: 500rpx;
						flex: 1;
						box-sizing: border-box;
						padding: 0rpx 40rpx;
						overflow: hidden;
						pointer-events: fill;

						.scroll-content {
							width: 100%;
							height: 100%;

							.honer-list {
								width: 100%;
								display: flex;
								justify-content: space-between;
								flex-wrap: wrap;
								align-items: flex-start;

								.honer-item {
									position: relative;
									width: calc(50% - 10rpx);
									height: 100rpx;
									background-color: rgba(0, 0, 0, 0.1);
									margin-bottom: 20rpx;
									display: flex;
									justify-content: center;
									align-items: center;
									box-sizing: border-box;
									padding: 0rpx 25rpx;
									border-radius: 8rpx;
									overflow: hidden;

									.honer-icon {
										width: 100%;
										height: 60rpx;

										.honer-icon-img {
											width: 100%;
											height: 100%;
										}
									}

									.honer-locked-masker {
										position: absolute;
										left: 0rpx;
										top: 0rpx;
										width: 100%;
										height: 100%;
										z-index: 9;
										backdrop-filter: blur(5rpx);
										display: flex;
										justify-content: center;
										align-items: center;

										.locked-icon {
											width: 30rpx;
											height: 30rpx;
										}
									}
								}
							}
						}
					}

					.bottom-tab-box {
						width: 100%;
						// height: 80rpx;
						margin-top: 20rpx;
					}

					.avatar-border-change {
						flex: 1;
						width: 100%;
						display: flex;
						flex-direction: column;
						justify-content: flex-start;
						align-items: center;
						box-sizing: border-box;
						padding: 0rpx 20rpx;
						overflow: hidden;

						.avatar-tab {
							width: 100%;
							margin-top: 10rpx;

							.n-tab-list {
								.tab-scroll-content {
									height: 50rpx;
									background-color: transparent;
									box-shadow: none;
								}

								.tab-list {
									position: relative;
									width: 100%;
									height: 50rpx;

									.bottom-line-box {
										position: absolute;
										left: 0rpx;
										bottom: 0rpx;
										width: 100%;
										height: 1rpx;
										background-color: rgba(0, 0, 0, 0.3);
										opacity: 0.3;
									}
								}

								.tab-item {
									height: 50rpx;
									// color: #000;
									color: #87847f;
									text-shadow: none;
									width: 50%;

									.top-tabName {
										font-size: 20rpx;
										line-height: 50rpx;
										// font-weight: 700;
									}
								}

								.bag-active-tabItem {
									background-color: rgba(0, 0, 0, 0.05);
									color: #715a52;
								}
							}
						}

						.avatar-border-list {
							position: relative;
							width: 600;
							flex: 1;
							margin-top: 20rpx;
							overflow: hidden;

							.list-content-box {
								width: 100%;
								height: 100%;
								overflow: hidden;
							}

							.scroll-content {
								width: 100%;
								height: 100%;
								overflow: hidden;
							}

							.avatar-list {
								display: flex;
								justify-content: flex-start;
								align-items: center;
								flex-wrap: wrap;
								box-sizing: border-box;
								padding: 20rpx;
								// background-color: #fff;

								.avatar-item {
									position: relative;
									width: 120rpx;
									height: 120rpx;
									background-color: #fff;
									box-shadow: 0rpx 0rpx 4rpx rgba(0, 0, 0, 0.3);
									border-radius: 50%;
									margin-right: 26rpx;
									margin-bottom: 20rpx;
									overflow: hidden;
									box-sizing: border-box;

									&:nth-child(4n) {
										margin-right: 0rpx;
									}

									.avatar-item-img {
										width: 100%;
										height: 100%;
									}

									.avatar-shadow-box {
										position: absolute;
										left: 0rpx;
										top: 0rpx;
										width: 100%;
										height: 100%;
										z-index: 10;
										border: 1rpx solid #fff;
										border-radius: 50%;
										box-shadow: inset 0rpx 0rpx 20rpx #fff;
										opacity: 0;
									}
								}

								.avatar-item-act {

									// border: 1rpx solid #fff;
									.avatar-shadow-box {
										opacity: 1;
									}
								}

								.avatar-item-boder {
									background-color: rgba(255, 255, 255, 0.6);
									// box-shadow: none;
									//
									border-radius: 15rpx;
									box-shadow: 0rpx 0rpx 4rpx rgba(255, 255, 255, 0.3);

									.avatar-shadow-box {
										border: 1rpx solid gold;
										box-shadow: inset 0rpx 0rpx 20rpx gold;
										border-radius: 15rpx;
									}
								}
							}
						}

						.avatar-btn-box {
							width: 100%;
							height: 100rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							box-sizing: border-box;
							padding: 0rpx 40rpx;

							.btn-item {
								flex: 1;
								height: 60rpx;
								// background-color: #fcd37b;

								// background-image: linear-gradient(to right, #f3f1c6, #efcf80);
								// color: #b27439;

								background-color: rgba(248, 239, 224, 1);
								color: #715a52;

								// color: #000;
								border-radius: 8rpx;
								box-sizing: border-box;
								display: flex;
								flex-direction: column;
								justify-content: center;
								align-items: center;
								margin-right: 60rpx;

								font-size: 24rpx;
								font-weight: 700;
								line-height: 24rpx;
								text-align: center;

								&:last-child {
									margin-right: 0rpx;
								}
							}

							.cancel-btn {
								background-image: linear-gradient(to right bottom,
										#f7f7f9 10%,
										#cacddc 60%,
										#f7f7f9 90%);
								color: #646369;
							}
						}
					}
				}
			}
		}

		.team-box {
			position: absolute;
			left: 0rpx;
			top: 0rpx;
			width: 100vw;
			height: 100vh;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;

			.top-box {
				width: 100%;
				height: 150rpx;
			}

			.team-line-box {
				width: 100%;
				box-sizing: border-box;
				padding: 0rpx 50rpx;
				height: 50rpx;

				.line-content {
					width: 100%;
					height: 100%;
					font-size: 24rpx;
					line-height: 24rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					color: #fff;
					border-bottom: 1rpx solid rgba(255, 255, 255, 0.3);
				}
			}

			.team-member-scroll {
				width: 100vw;
				flex: 1;
				overflow: hidden;

				.menber-list {
					width: 100%;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					flex-wrap: wrap;
					box-sizing: border-box;
					padding: 20rpx 50rpx;

					.member-item {
						position: relative;
						width: 200rpx;
						height: 300rpx;
						border-radius: 10rpx;
						margin-bottom: 20rpx;
						overflow: hidden;


						.menber-item-content {
							position: relative;
							width: 100%;
							height: 100%;
							border-radius: 8rpx;
							overflow: hidden;


							.level-number {
								position: absolute;
								right: 5rpx;
								top: 5rpx;
								width: 60rpx;
								height: 24rpx;
								font-size: 16rpx;
								line-height: 16rpx;
								padding-right: 5rpx;
								z-index: 3;
								color: #fff;

								.level-icon {
									transform: scale(0.75);
								}

								.level-text {
									font-size: 30rpx;
									line-height: 30rpx;
								}


							}


							.rarity-level {
								position: absolute;
								left: 5rpx;
								top: 5rpx;
								width: 60rpx;
								height: 30rpx;
								z-index: 10;

								.rl-img {
									width: 100%;
									height: 100%;
								}
							}

							.start-box {
								position: absolute;
								left: 0rpx;
								bottom: 30rpx;
								width: 100%;
								height: 30rpx;
								z-index: 10;
								box-sizing: border-box;
								padding-left: 10rpx;

								.start-item {
									width: 20rpx;
									height: 20rpx;
									display: flex;
									justify-content: center;
									align-items: center;

									.start-img {
										width: 100%;
										height: 100%;
									}
								}
							}

							.bottom-info-new {
								position: absolute;
								left: 0;
								bottom: 0;
								width: 100%;
								height: 30rpx;
								z-index: 10;

								// background-color: rgba(0, 0, 0, 0.6);
								border-radius: 0rpx 0rpx 10rpx 10rpx;

								.name-box {
									height: 100%;
									// font-size: 24rpx;
									font-size: 12rpx;
									line-height: 30rpx;
									color: #fff;
									text-shadow: 1rpx 1rpx 1rpx rgba(0, 0, 0, 0.3);
									box-sizing: border-box;
									// letter-spacing: 2rpx;
								}

							}

							.locked-masker {
								position: absolute;
								left: 0rpx;
								top: 0rpx;
								width: 100%;
								height: 100%;
								background-color: rgba(0, 0, 0, 0.6);
								z-index: 99;
								display: flex;
								justify-content: center;
								align-items: center;
								// border-radius: 10rpx;

								.locked-tip {
									font-size: 22rpx;
									line-height: 35rpx;
									height: 35rpx;
									color: #fff;
									background-color: rgba(0, 0, 0, .5);
									text-align: center;
									width: 100%;
									text-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, .3);
									opacity: 0.8;
								}
							}
						}




						&:nth-child(3n) {
							margin-right: 0rpx;
						}
					}





					.active-menber {
						.item-content {
							.item-img {
								animation: imageScale 0.2s linear;
							}
						}
					}

					@keyframes imageScale {
						0% {
							transform: scale(1);
						}

						50% {
							transform: scale(1.1);
						}

						100% {
							transform: scale(1);
						}
					}

					.empty-item {
						opacity: 0;
					}
				}
			}


		}

		.shop-box {
			position: absolute;
			left: 0rpx;
			top: 0rpx;
			width: 100vw;
			height: 100vh;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;

			.top-box {
				width: 100%;
				height: 200rpx;
			}

			.shop-tab-box {
				width: 100%;
				box-sizing: border-box;
				padding: 0rpx 35rpx;
				margin-bottom: 20rpx;
			}

			.shop-banner {
				position: relative;
				width: 100%;
				// height: 300rpx;
				// height: 425rpx;
				// background-color: pink;
				height: 250rpx;

				.banner-img-box {
					position: absolute;
					left: 0rpx;
					bottom: 0rpx;
					width: 100%;
					height: 250rpx;
					box-sizing: border-box;
					padding: 0rpx 35rpx;

					.banner-img {
						width: 100%;
						height: 100%;
						object-fit: cover;
						box-shadow: 0rpx 0rpx 2rpx #fff;
					}
				}
			}

			.goods-scroll {
				flex: 1;
				width: 100vw;
				// background-color: #fff;
				overflow: hidden;

				.goods-scroll-content {
					width: 100vw;
					height: 100%;

					.goods-list {
						width: 100%;
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						flex-wrap: wrap;
						box-sizing: border-box;
						padding: 20rpx 35rpx;

						.goods-item {
							width: 210rpx;
							// height: 373rpx;
							height: 280rpx;
							background-color: transparent;
							border-radius: 5rpx;
							box-shadow: 0 0 2rpx rgba(255, 255, 255, 0.6);
							margin-right: 25rpx;
							margin-bottom: 25rpx;
							overflow: hidden;

							.item-content {
								position: relative;
								width: 100%;
								height: 100%;

								.item-img {
									position: absolute;
									left: 0rpx;
									top: 0rpx;
									width: 100%;
									height: 100%;
									object-fit: cover;
									z-index: 9;
								}

								.goods-img {
									width: 100%;
									height: 210rpx;
									background-color: #fff;

									.goods-img-icon {
										width: 100%;
										height: 100%;
										object-fit: cover;
									}
								}

								.goods-name-box {
									width: 100%;
									height: 30rpx;
									box-sizing: border-box;
									padding: 0 12rpx;
									display: flex;
									justify-content: center;
									align-items: center;

									.left-line,
									.right-line {
										flex: 1;
										height: 2rpx;
										background-color: #a29ab6;
									}

									.center-name {
										// width: 150rpx;
										display: inline-block;
										height: 100%;
										display: flex;
										justify-content: center;
										align-items: center;
										font-size: 16rpx;
										color: #d9dde0;
										margin-left: 10rpx;
										margin-right: 10rpx;
									}
								}

								.bottom-buy-btn {
									position: absolute;
									left: 0rpx;
									bottom: 10rpx;
									width: 100%;
									height: 30rpx;

									z-index: 10;
									box-sizing: border-box;
									padding: 0rpx 10rpx;

									.buy-btn-content {
										width: 100%;
										height: 100%;
										border-radius: 5rpx;
										color: #594b30;
										// background-color: #ebd69f;
										background: linear-gradient(-45deg,
												#fce0b6 0%,
												/* 左下角颜色 */
												#fce0b6 30%,
												/* 颜色过渡 */
												#fdd382 30%,
												/* 中间部分的颜色的起始位置 */
												#fdd382 70%,
												/* 中间部分的颜色的过渡 */
												#fce0b6 70%,
												/* 中间部分的颜色的结束位置 */
												#fce0b6 100%
												/* 右上角颜色 */
											);

										font-size: 24rpx;
										line-height: 30rpx;
										font-weight: 700;
										display: flex;
										justify-content: center;
										align-items: center;
										box-shadow: 0rpx 0rpx 10rpx #ebd69f;
									}
								}
							}

							&:nth-child(3n) {
								margin-right: 0rpx;
							}
						}

						.active-menber {
							.item-content {
								.item-img {
									animation: imageScale 0.2s linear;
								}
							}
						}

						@keyframes imageScale {
							0% {
								transform: scale(1);
							}

							50% {
								transform: scale(1.1);
							}

							100% {
								transform: scale(1);
							}
						}

						.empty-item {
							opacity: 0;
						}
					}
				}
			}

			.shop-tab {
				position: relative;
				width: 100vw;
				height: 150rpx;
				// background-color: pink;
				background-image: linear-gradient(to bottom, #14151f, #2e3444);

				.tab-content {
					position: absolute;
					left: 0rpx;
					bottom: 10rpx;
					width: 100vw;
					height: 100rpx;
					// background-color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
					box-sizing: border-box;
					padding: 0 50rpx;

					.tab-item {
						width: 100rpx;
						height: 100rpx;
						// background-color: #fff;
						margin-right: 40rpx;
						display: flex;
						flex-direction: column;
						justify-content: flex-start;
						align-items: center;

						&:last-child {
							margin-right: 0rpx;
						}

						.top-icon {
							width: 60rpx;
							height: 60rpx;
							background-color: #181b28;
							border-radius: 50%;
							border: 1rpx solid #dadfeb;
							display: flex;
							justify-content: center;
							align-items: center;

							.icon-img {
								width: 40rpx;
								height: 40rpx;
								object-fit: cover;
							}
						}

						.bottom-text {
							width: 100%;
							height: 30rpx;
							// background-color: purple;
							margin-top: 5rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: 20rpx;
							font-weight: 700;
							// color: #fff;
							color: #dadfeb;
							text-shadow: 0rpx 0rpx 5rpx rgba(0, 0, 0, 0.6);
						}
					}

					.active-shop-tab-item {
						.top-icon {
							background-color: #ebd69f;
							border-color: #ebd69f;
						}

						.bottom-text {
							color: #e6d09a;
						}
					}
				}
			}

			.shop-card-box {
				flex: 1;
				width: 100%;
				box-sizing: border-box;
				padding: 0rpx 35rpx;

				.top-card-banner {
					width: 100%;
					height: 220rpx;
					border-radius: 6rpx;
					box-shadow: 0rpx 0rpx 2rpx #fff;
					overflow: hidden;
					margin-bottom: 40rpx;

					.top-card-banner-img {
						width: 100%;
						height: 100%;
					}
				}

				.card-good {
					width: 100%;
					height: 400rpx;
					border-radius: 6rpx;
					box-shadow: 0rpx 0rpx 2rpx #fff;
					overflow: hidden;
					margin-bottom: 40rpx;

					.card-good-img {
						width: 100%;
						height: 100%;
					}
				}

				.card-super {
					height: 430rpx;
				}
			}
		}

		// .close-icon {
		// 	position: absolute;
		// 	left: 20rpx;
		// 	top: 100rpx;
		// 	width: 40rpx;
		// 	height: 40rpx;
		// 	z-index: 999999;

		// }
	}

	.bottom-tab {
		position: relative;
		width: 100%;
		box-sizing: border-box;

		.tab-line-box {
			position: absolute;
			left: 0rpx;
			top: -2rpx;
			width: 100%;
			height: 2rpx;
			background-color: rgba(0, 0, 0, 0.1);
			opacity: 0.6;
		}

		.tab-scroll-content {
			position: relative;
			width: 100%;
			height: 50rpx;
			box-sizing: border-box;
			// padding: 0 35rpx;
			overflow: hidden;
		}

		.tab-list {
			display: inline-block;
			height: 50rpx;
			width: 100%;
			// background-color: rgba(59, 61, 84, .2);
		}

		.tab-item {
			position: relative;
			width: 33.3%;
			height: 50rpx;
			display: inline-block;
			text-align: center;
			color: #87847f;
			letter-spacing: 2rpx;
			border-radius: 2rpx;
			overflow: hidden;

			.tab-content {
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.top-tabName {
				font-size: 22rpx;
				line-height: 50rpx;
				// font-weight: 700;
			}

			.bottom-tabType {
				font-size: 18rpx;
			}

			.line-box {
				position: absolute;
				right: 0rpx;
				top: 50%;
				transform: translateY(-50%);
				width: 2rpx;
				height: 20rpx;
				// background-color: rgba(255, 255, 255, .3);
				background-color: rgba(0, 0, 0, 0.1);
				opacity: 0.6;
			}

			&:last-child {

				// margin-right: 5rpx;
				.line-box {
					opacity: 0;
				}
			}

			&:first-child {
				// margin-left: 5rpx;
			}
		}

		.tab-item-active {
			// background-color: #fff;
			// color: #2d2d2d;

			// background-color: #fadd8c;
			// box-shadow: 0 0 10rpx #fadd8c;
			// color: #572c0d;

			// background-image: linear-gradient(to right, #fef9d9, #f3f1c6);
			// color: #b27439;

			// background-color: rgba(248, 239, 224, 1);
			background-color: rgba(0, 0, 0, 0.05);

			// background-color: rgba(254, 249, 217, 1);
			color: #715a52;
			// color: #000;
			// text-shadow: 1rpx 1rpx 1rpx rgba(255, 255, 255, .5);
			animation: bagTabScale 0.2s linear;
			// box-shadow: inset 0rpx 0rpx 4rpx #fff;
		}

		@keyframes bagTabScale {
			0% {
				transform: scale(1);
			}

			50% {
				transform: scale(1.1);
			}

			100% {
				transform: scale(1);
			}
		}
	}

	.n-tab-list {
		position: relative;
		width: 100%;
		box-sizing: border-box;

		.tab-scroll-content {
			position: relative;
			width: 100%;
			height: 50rpx;
			box-sizing: border-box;
			// padding: 0 35rpx;
			overflow: hidden;
			background-color: rgba(59, 61, 84, 0.2);
			box-shadow: 0rpx 0rpx 2rpx rgba(255, 255, 255, 0.6);
		}

		.tab-bottom-line {
			position: absolute;
			left: 0rpx;
			bottom: 6rpx;
			width: 100%;
			height: 2rpx;
			opacity: 0.2;
			box-sizing: border-box;
			padding: 0rpx 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 9;

			.line-center {
				width: 100%;
				height: 100%;
				background-image: linear-gradient(to right,
						rgba(255, 255, 255, 0) 0%,
						rgba(255, 255, 255, 0.8) 15%,
						rgba(255, 255, 255, 0.8) 85%,
						rgba(255, 255, 255, 0) 100%);
			}
		}

		.tab-list {
			display: inline-block;
			height: 50rpx;
			// background-color: rgba(59, 61, 84, .2);
			// margin-top: 2rpx;
			// margin-bottom: 2rpx;
		}

		.tab-item {
			position: relative;
			// flex: 1;
			width: 175rpx;
			// height: 80rpx;
			height: 50rpx;
			display: inline-block;
			text-align: center;
			// flex-direction: column;
			// justify-content: center;
			// align-items: center;
			// background-image: linear-gradient(to right bottom, #f7f7f9 10%, #cacddc 60%, #f7f7f9 90%);
			// color: #646369;
			color: #fff;
			// background-color: rgba(59, 61, 84, .1);
			// margin-right: 20rpx;
			// border-bottom-left-radius: 10rpx;
			// border-bottom-right-radius: 10rpx;
			border-radius: 2rpx;
			overflow: hidden;
			// box-shadow: 0 0 2rpx rgba(255, 255, 255, 1);
			// margin-top: 5rpx;
			// margin-bottom: 5rpx;

			.tab-content {
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.top-tabName {
				font-size: 24rpx;
				line-height: 50rpx;
				font-weight: 700;
			}

			.bottom-tabType {
				font-size: 18rpx;
			}

			.line-box {
				position: absolute;
				right: 0rpx;
				top: 50%;
				transform: translateY(-50%);
				width: 2rpx;
				height: 30rpx;
				background-color: rgba(255, 255, 255, 0.3);
				opacity: 0.3;
			}

			.locked-icon {
				// position: absolute;
				// right: 0rpx;
				// top: 0rpx;
				width: 25rpx;
				height: 25rpx;
				margin-left: 5rpx;
			}

			&:last-child {

				// margin-right: 5rpx;
				.line-box {
					opacity: 0;
				}
			}

			&:first-child {
				// margin-left: 5rpx;
			}
		}

		.bag-active-tabItem {
			background-color: rgba(248, 239, 224, 1);
			color: #715a52;
			text-shadow: 1rpx 1rpx 1rpx rgba(255, 255, 255, 0.5);
			animation: bagTabScale 0.2s linear;
		}

		@keyframes bagTabScale {
			0% {
				transform: scale(1);
			}

			50% {
				transform: scale(1.1);
			}

			100% {
				transform: scale(1);
			}
		}
	}

	.bottom-big-tab {
		width: 100%;
		height: 80rpx;
		background-color: rgba(59, 61, 84, 0.2);
		box-shadow: 0rpx 0rpx 2rpx rgba(255, 255, 255, 0.6);

		.big-tab-item {
			position: relative;
			flex: 1;
			height: 100%;
			color: #fff;
			font-size: 28rpx;
			text-align: center;
			line-height: 28rpx;
			font-weight: 700;

			.act-item-masker {
				position: absolute;
				left: 0rpx;
				top: 0rpx;
				width: 100%;
				height: 100%;
				background-image: linear-gradient(to bottom,
						rgba(248, 239, 224, 0.2) 0%,
						rgba(248, 239, 224, 0) 100%);
				z-index: 9;

				.masker-top-line {
					position: absolute;
					left: 0rpx;
					top: 0rpx;
					width: 100%;
					height: 1rpx;
					background-color: rgba(255, 255, 255, 0.4);
				}

				.border-line {
					position: absolute;
					top: 1rpx;
					width: 1rpx;
					height: 100%;
					background-image: linear-gradient(to bottom,
							rgba(255, 255, 255, 0.2) 0%,
							rgba(255, 255, 255, 0) 100%);
				}

				.border-line-left {
					left: 0rpx;
				}

				.border-line-right {
					right: 0rpx;
				}
			}
		}
	}

	.flex-row-center-center {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.flex-row-start-center {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.dice-reward-list {
		width: 100%;
		box-sizing: border-box;
		padding: 0rpx 35rpx;
		height: 120rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;

		.scroll-content {
			width: 100%;
			height: 110rpx;

			.reward-item {
				position: relative;
				display: inline-block;
				width: 100rpx;
				height: 100rpx;
				margin-right: 25rpx;
				box-sizing: border-box;
				box-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, 0.1);
				background-color: rgba(255, 255, 255, 0.3);
				overflow: hidden;

				&:last-child {
					margin-right: 0rpx;
				}

				&::after {
					position: absolute;
					left: 0rpx;
					bottom: 0rpx;
					content: "";
					width: 100%;
					height: 2rpx;
					z-index: 9;
				}

				&::before {
					content: "";
					position: absolute;
					left: 0rpx;
					bottom: 0rpx;
					width: 100%;
					height: 100%;
					z-index: 2;
				}

				.reward-num {
					position: absolute;
					right: 0rpx;
					bottom: 4rpx;
					display: inline-block;
					padding: 0 8rpx;
					font-size: 16rpx;
					color: #fff;
					background-color: rgba(0, 0, 0, 0.3);
					// border-radius: 10rpx;
					line-height: 20rpx;
				}

				.reward-item-icon {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>